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

display: grid;

grid-template-columns: 1fr 1fr;

}

列和行构造

要放置按钮，我们只须要将 justify-self 设置为 end。

header button { 
    justify-self: end; 
}

导航的地位按照以下方法设置：

header nav { 
 
    justify-self: start; 
 
}

应用 Flexbox 和 CSS Grid 创建构造

根本的构造如下图所示：

这种构造须要在行和列两个偏向上保持一致，所以应用 CSS Grid 实现整体构造十分有效。

筹划对于构造的实现来说，十分重要。

接下来看看代码若何一步步实现。起首 display: grid; 是根本设置，其次内容块之间的间距，可以经由过程 grid-column-gap 和 grid-row-gap 实现。

.container { 
  display: grid; 
  grid-template-columns: 0.4fr 0.3fr 0.3fr; 
  grid-column-gap: 10px; 
  grid-row-gap: 15px; 
}

Header 部分横跨所有的列。

.header { 
  grid-column-start: 1; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 2; 
  background-color: #d5c9e2; 
}

也可以应用简写，肇端值和停止值位于同一行上，并用斜杠分隔。就像如许：

“sidebar main”

.header { 
  grid-column: 1 / 4; 
  grid-row: 1 / 2; 
  background-color: #55d4eb; 
}

完成网格构造的构建之后，微调内容就是下一步。

导航

膳绫擎的 CSS Grid 构造示例中，须要在导航栏设置 justify-self：start;，在按钮设置 justify-self: end;，然则如不雅应用 Flexbox，导航的间距会变得很轻易设置。

.header { 
  grid-column: 1 / 4; 
  grid-row: 1 / 2; 
  color: #9f9c9c; 
  text-transform: uppercase; 
  border-bottom: 2px solid #b0e0ea; 
  padding: 20px 0; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

4/5 首页上一页 2 3 4 5 下一页尾页

　　推荐阅读

　　刷脸”进站，人脸识别落地火车站究竟靠不靠谱

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

本文标题：如何使用Flexbox和CSS Grid，实现高效布局

地址：http://www.17bianji.com/lsqh/37766.html

1/2 1