CSS3布局（前端所必须要掌握）

CSS布局

传统方案是基于盒装模型，依赖display属性+position属性+float属性，但对于一些特殊布局（eg:垂直居中）就不容易实现。

补充：
块元素：出现在另一个元素下面的元素；
内联元素：出现在另一个元素旁边的元素，就像段落中的单个单词一样；

dispaly属性一些默认的display的值，段落之间样式默认值为：display:block；<a>元素默认为display:inline。
注：display:flex和display:grid在布局上比较重要。

1、Flex布局

• 弹性盒子(Flexbox)
  用于创建横向/纵向的一维页面布局，在其父元素上应用display:flex，所有直接子元素机会按照flex进行布局，但是子元素的float,clear,vertical-align属性将失效。

任何一个容器都可指定为flex布局。

.box {
 display: flex;
}
<div class="box">
 <div class="box1">one</div>
 <div class="box2">two</div>
 <div class="box3">three</div>
</div>

.box {
 display: flex;
}
.box > div {
 flex:1
}
<div class="box">
 <div class="box1">one</div>
 <div class="box2">two</div>
 <div class="box3">three</div>
</div>

.container{
 display:flex;
 flex-wrap: wrap; /*可换行*/
 justify-content:center;
}
.item{
 flex: 0 1 150px;
 margin: 5px; /*外边距*/
}

flex：是flex-grow、flex-shrink、flex-basis的合并形式。

2、Grid布局

用于同时在两个维度把元素按行和列排列整齐。grad-template-rows和grid-template-columns定义了行和列的轨道。grid-gap定义了网格间的间距。

Grid 布局只对项目生效，不对项目子元素起作用。

如下代码：

.box {
 display:grid;
 grid-template-columns: 1fr 1fr 1fr;
 grad-template-rows: 100px 100px;
 grid-gap:10px;
}
<div class="box">
 <div class="box1">one</div>
 <div class="box2">two</div>
 <div class="box3">three</div>
 <div class="box1">one</div>
 <div class="box2">two</div>
</div>

注：
a.fr单位跨网格轨道可用空间的分布。上面代码中有着3个大小为1fr的轨道的网格容器，创建了三个列轨道；
b.若最后一个是2fr，则表示最后一个轨道是前者的二倍；
c.还可以与绝对单位结合使用，eg:
grid-template-columns: 150px 1fr 2fr;表示第一列宽是150像素，第三列宽是第二列宽的2倍;
d.grid-template-columns: 150px auto 150px;auto表示由浏览器自己决定

• 默认情况下，容器元素都是块级元素，但也可以设为行内元素。如下代码，就是指定了div是一个行内元素，该元素内部采用网格布局：
  div{display: inline-grid;}
  注：设为网格布局后，容器子元素（项目）的float、display:inline-block、display:table-cell、vertical-align和column-*等
  设置都将失效。
• 容器指定了网格布局后，就要划分行和列了。
  列宽：grid-template-columns
  行高：grid-template-rows

代码如下：

.container {
 display:grid;
 grid-template-columns:100px 100px 100px;
 grid-template-rows:100px 100px 100px;
}

上面代码指定了一个三行三列的网格，列和宽都是100px,当然也可用百分比;
或用repeat(3,100px)也可；
或用repeat(auto-fill,100px)，当容器大小不确定时可以用。

• 比较常用的布局
  两栏布局：

grid-template-columns: minmax(150px,25%) 1fr;

表示第一列宽度最小为150px，最大宽度为总宽度的25%

三明治布局
grid-template-rows：auto 1fr auto;
垂直划分为上中下三部分（页眉、内容区、页脚），页眉和页脚都是本来的内容高度，内容区是剩下所有的高度。

圣杯布局（最常用）
是将三明治布局中的内容区分成三部分（左边栏、主栏、右边栏）

html代码

<div class="container">
 <header/>
 <div>
 <main/>
 <div/>
 <footer/>
</div>

CSS代码：

.container{
 display: grid;
 grid-template: auto 1fr auto / auto 1fr auto;
}

表示垂直方向（页眉和页脚都是本身内容高度，内容区占满剩余的高度），水平方向（左边栏和右边栏都是本身内容高度，中间主栏占满剩余的高度）。

十二网格布局

grid-template-columns: repeat(12, 1fr);

一些常用的网格属性

• 行间距：grid-row-gap

• 列间距：gid-column-gap

• 合并写法：grid-gap

• 设置单元格内容的水平位置：justify-items

• 设置单元格内容的垂直位置：align-items

• 合并写法：place-items

• 整个内容区域在容器里面的水平位置：justify-content

• 整个内容区域在容器里面的垂直位置：align-content

• 合并写法：place-content

• grid-column：1/3等同于grid-column: 1/span 2表示从第一根列线到第三根列线（即第一列和第二列）

• grid-row：1/span 2，第一根行线，横跨两个网格，（即表示第一行和第二行）

• grid-area：指定项目放在哪个区域