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

flex-direction: column;

}

接下来，须要调剂 header 容器中的 fr 单位。将 grid-template-columns 设置为 1fr 和 1fr。如许 header 中就有两个雷同大年夜小的列，放置导航项和按钮会很合适。

有一件事要留意：这些名字须要“连接”到样式上。所以须要在 header block 中，添加 grid-area: header;。

最后，我们经由过程组合 Flexbox 和 CSS Grid 来创建更复杂的构造。

经由过程 display: flex; 主动创建一个全宽的 header(header 默认情况下是块级元素)。经由过程这个声明，导航元素的放置会变得很轻易。

导航栏的左侧有一个 logo 和两个菜单项，右侧有一个登录按钮。导航位于 header 中，经由过程 justify-content: space-between; 可以实现导航和按钮之间的主动距离。

代码如下:

header{ 
    padding: 15px; 
    margin-bottom: 40px; 
    display: flex; 
    justify-content: space-between; 
} 
  
header nav ul { 
    display: flex; 
    align-items: baseline; 
    list-style-type: none; 
}

页面内容样式

.wrapper { 
    display: flex; 
    flex-direction: row; 
}

主内容区域和侧边栏的大年夜小设置异常重要，因为重要的信息都在这里展示。主内容区域应当是侧边栏大年夜小的三倍，应用 Flexbox 很轻易实现这点。

.main { 
    flex: 3; 
    margin-right: 60px; 
} 
  
.sidebar { 
   flex: 1; 
}

总的来说，Flexbox 在创建这个简单的构造时，十分高效。尤其在控制列表元素样式和设置导航与按钮之间的间距方面，特别有效。

应用 CSS Grid 创建构造

为了测试效力，接下来应用 CSS Grid 创建雷同的根本构造。

Grid 模板区域

CSS Grid 的便利之处在于，可以指定模板区域，这也使得定义构造变得异常直不雅。采取这种办法，网格上的区域可以定名并引用地位项。对于这个根本构造，我们须要定名四个项目：

header
main content
sidebar
footer

根本 HTML 构造

<div class="container"> 
    <header> 
        <nav> 
          <ul> 
            <li></li> 
            <li></li> 
            <li></li> 
          </ul> 
        </nav> 
        <button></button> 	
			 2/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

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


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