如何使用Flexbox和CSS Grid，实现高效布局

CSS 浮动属性一向是网站上分列元素的重要办法之一，然则当实现复杂构造时，这种办法不老是那么幻想。荣幸的是，在现代网页设计时代，应用 Flexbox 和 CSS Grid 来对齐元素，变得相对轻易起来。

应用 Flexbox 可以使元素对齐变得轻易，是以 Flexbox 已经被广泛应用了。

同时，CSS Grid 构造也为网页设计行业带来了很大年夜的便利。固然 CSS Grid 构造未被广泛采取，然则浏览器逐渐开端增长对 CSS Grid 构造的支撑。

固然 Flexbox 和 CSS Grid 可以完成类似的构造，然则本次，我们进修的是若何组合应用这两个对象，而不是只选择个中的一个。在不久的将来，当 CSS Grid 构造获得完全的浏览器支撑时，设计人员就可以或许应用每个 CSS 组合的优势，来创建最有效和最有趣的构造设计。

测试 Flexbox 和 CSS Grid 的根本构造

我们年腋荷琐很简单且熟悉的构造类型开端，包含标题，侧边栏，重要内容和页脚等部分。经由过程如许一个简单的构造，来赞助我们快速找到各类元素的构造办法。

下面是须要创建的内容：

要完成这个根本构造， Flexbox 须要完成的重要义务包含以下方面：

创建完全宽度的 header 和 footer
将侧边栏放置在主内容区域左侧
确保侧边栏和主内容区域的大年夜小合适
确保导航元素定位精确

接下来，将侧边栏和主内容区域应用一个 wrapper 包含起来。具有 .wrapper 类的 div，也须要设置 display: flex; 然则 flex 偏向与上述不合。这是因为侧边栏和主内容区域彼此相邻而不是堆叠。

根本 HTML 构造

<div class="container"> 
    <header> 
        <nav> 
          <ul> 
            <li></li> 
            <li></li> 
            <li></li> 
          </ul> 
        </nav> 
        <button></button> 
    </header> 
    <div class="wrapper"> 
        <aside class="sidebar"> 
            <h3></h3> 
        </aside> 
        <section class="main"> 
            <h2></h2> 
            <p></p> 
        </section> 
    </div><!-- /wrapper --> 
    <footer> 
        <h3></h3> 
        <p></p> 
    </footer> 
</div><! -- /container -->

应用 Flexbox 创建构造

Header 样式

我们大年夜外到内，逐层开端设计，起首将 display: flex; 添加到 container，这也是所有 Flexbox 构造的第一步。接着，将 flex-direction 设置为 column，确保所有部分彼此相对。

.container { 
    display: flex; 	
			 1/5    1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　刷脸”进站，人脸识别落地火车站究竟靠不靠谱
            
            2017国庆、中秋假日叠加，构成长达八天的“超等假期”。在这弗成多得的出游良机中，记者就是“人山车海”中的一员，去到长沙感触感染了毛主席昔时傲立橘子洲头指导江>>>详细阅读


本文标题：如何使用Flexbox和CSS Grid，实现高效布局
地址：http://www.17bianji.com/lsqh/37766.html
 1/2    1