06 CSS3布局-上（前端必须掌握）

如下主要参考了http://www.ruanyifeng.com/blo... 和 https://developer.mozilla.org... 两篇文章。若是还想更详细的能够看一看这两篇文章。大鹏一日同风起，扶摇直上九万里！一块儿学习，一块儿进步！

CSS布局

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

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

dispaly属性一些默认的display的值，段落之间样式默认值为：display:block；<a>元素默认为display:inline。

注： display:flex和 display:grid在布局上比较重要。

一、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的合并形式。

二、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：指定项目放在哪一个区域

如不完善之处，评论区欢迎您！