前言
CSS的一个重点应用就是网页布局。传统的布局方式，都是基于盒模型，主要通过display, position和float来实现，但是一些特殊的布局方式处理起来非常不便，如垂直居中这种方式。flex布局是W3C在2009年推出的一种方式，可以完整、简单以及响应式地实现各种页面布局，目前得到了几乎所有浏览器的支持。IE可以兼容到10+以上版本。包括：
- Chrome 29+
- Firefox 28+
- Internet Explorer 11
- Opera 17+
- Safari 6.1+ (prefixed with -webkit-)
- Android 4.4+
- iOS 7.1+ (prefixed with -webkit-)
更多的布局兼容性可以参考：Can I Use,其中关于FlexBox的兼容性由以下图示：
说明：
- 红色表示不支持；
- 草黄色表示部分支持；
- 绿色表示支持。
有了这么多的布局方式，为什么还要引入flex布局呢？
因为它十分简单灵活，只需要几行简单的代码就可以简便、完整、响应式地实现各种页面布局，在没有接触过flex布局之前，相信大家都或多或少受到float、display、position这些属性的困扰。然而对于Flex 布局，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局。flex布局可以控制未知容器元素的对齐方式，排列方向，排列顺序等，甚至是在未知大小的容器也能这样做。它的主要特点是：可以修改其子元素（item）的宽和高，使得它们在不同的屏幕尺寸中可以填补可用的空间。
1.基本知识
1.1 什么是flex布局
flex布局就是弹性布局，用来为盒模型提供最大的灵活性，其实任何一个容器都可以指定为flex布局。
如：
.container {
display: -webkit-flex; /* Safari */
display: flex;
}
复制代码行内元素同样也可以使用flex布局。
.container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}
复制代码但是需要注意的是：设置flex布局之后，子元素的float,clear,vertical-align属性将会失效。
1.2 基本概念
采用Flex布局的元素是Flex容器（flex container），简称"容器"。它的所有子元素都是容器成即：Flex项目（flex item）。
在flex容器中，默认存在两根轴：水平主轴（main axis）和垂直交叉轴（cross axis）。main start是从主轴开始的位置与边框的交叉点，结束位置是main end; cross start是从交叉轴开始的位置，结束的位置叫做cross end.
1.2 flex容器的属性
flex容器共有以下几个属性。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- flex-grow
- flex-shrink
- flex-basis
下面分别对每个属性的作用进行讲解。
(1) flex-direction
该属性决定了主轴的方向。也就是每个item的排列方向。取值包括：
flex-direction: row (默认值)主轴为水平方向，起点在左端。
flex-direction: row-reverse主轴为水平方向，起点在右端。
flex-direction: column主轴为垂直方向，起点在上沿。
flex-direction: column-reverse主轴为垂直方向，起点在下沿。
复制代码
(2) flex-wrap
默认情况下，项目排列在一条轴线上。而该属性定义的就是，如果一条轴线排不下，如何换行。它的取值包括：
flex-wrap: nowrap(默认)不换行。
flex-wrap: wrap换行，第一行在上方。
flex-wrap: wrap-reverse换行，第一行在下方。
复制代码
(3) flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
(4)justify-content
该属性定义了项目在主轴上的对齐方式。
该属性的取值有5个，对齐方式与轴的方向有关，假设轴的方向为从左到右。
flex-start(default): 左对齐
flex-end: 右对齐
center：居中
space-between: 两端对齐，项目之间的间隔都相等
space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
复制代码(5) align-items
该属性定义了Flex子元素在容器侧轴对齐方式，类似于justify-content，只不过不是水平方向，而是纵向。 这个属性可以设置所有flex子元素对齐方式，并且包括匿名元素。它的取值也有5个。
flex-start: 交叉轴的起点对齐；
flex-end: 交叉轴的终点对齐；
center: 交叉轴的中点对齐；
stretch: default, 如果items未设置高度或设为auto,将占满整个容器的高度；
baseline: items的第一行文字的基线对齐；
复制代码(6)align-content
该属性决定了多条轴线的对齐方式，指flex容器内的每行在flex容器中侧轴排列方式,倘若只有一条轴线，该属性不起作用。该属性有6个值：
- flex-start：与侧轴的起点对齐。
- flex-end：与侧轴的终点对齐。
- center：与侧轴的中点对齐。
- space-between：与侧轴两端对齐，轴线之间的间隔平均分布。
- space-around：侧轴每行平均分布，轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（default）：侧轴各行占满整个侧轴线。如果子元素未设置高度或设为auto，Flex子元素会沿着flex容器侧轴方向填满整个flex容器高度； 如果设置高度，则每行按实际高度显示，并且多行会占满整个容器。需要说明一下侧轴是从左向右，则应该是指宽度；侧轴从上向下，则应该是指高度
注意：所有column-xx属性在flex容器上都不生效；flex容器上不可使用::first-line和::first-letter两个伪元素 (7)flex-grow
该属性用来指定 flex子元素放大比例，所有参与的子元素会根据 flex-grow 计算出对应的百分比来填充整个容器。 默认为0，如果有的子元素没有设置，即取默认值，则该子元素的宽度为其实际宽度。 如果所有flex子元素的flex-grow值相同，那么flex子元素在flex容器中具有相同的尺寸。（注意：设置负数无效）
.flex-item {
-webkit-flex-grow: <number>; /* Safari */
flex-grow: <number>;
}
复制代码
(8)flex-shrink
flex-shrink属性定义了子元素的缩小比例，即如果空间不足，该子元素将缩小。数值越大，缩小越多。默认值为1。 如果设为0，则不缩放 如果所有子元素的flex-shrink属性都设为一样的值（0除外），当空间不足时，都将等比例缩小。 如果其中的部分子元素 flex-shrink属性为0，其他子元素都为1，则父容器空间不足时，属性值为0的子元素不缩小。 如果子元素的属性值部分或全部为0时，当父容器空间不足时，会导致溢出。
.flex-item {
-webkit-flex-shrink: <number>; /* Safari */
flex-shrink: <number>;
}
复制代码
(9)flex-basis
flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。 浏览器根据这个属性，计算主轴是否有多余空间，尽量大的填充该属性值，比如设为200px; 如果除去其他子元素后有大于等于200px 的空间， 则该子元素在主轴上为200px。如果除去其他子元素后有小于200px 的空间，则按父容器减去其他子元素主轴大小后的空间来设置。它的默认值为auto，即子元素的本来大小。
该属性用来指定其中某一子元素固定高度或宽度，如果空间大，按指定的大小来显示，如果空间小，则用剩余的空间大小来填充。
该属性值可以设为跟width或height属性一样的值（比如200px），主轴为main axis时指宽度，主轴为cross axis指高度.
.flex-item {
-webkit-flex-basis: auto | 200px; /* Safari */
flex-basis: auto | 200px;
}
复制代码2. 实际应用
等间距卡片式布局(高度固定)
什么意思呢，也就是说页面中展示卡片的样式，且每个客片之间的间距保持一致（此处: 水平间距20px，垂直间距20px）;
CSS的层级结构为：
.parent {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
.card-box {
width: 100%;
height: 256px;
flex: 0 0 31%; // 如果每行指向放置2个卡片，则设置为flex: 0 0 47%即可(因为中间有设置有间距，所以不能设置为flex: 0 0 50%)
margin: 0 20px 20px 0;
background-color: #f9f9f9;
border-radius: 4px;
border: solid 1px #e1e1e1;
.title {
margin: 15px 0 10px 30px;
}
.text {
margin: 0 30px;
}
}
}
复制代码说明：
footer不随视窗变化而浮动的粘性布局
.container {
display: flex;
flex-direction: column;
.content {
height: 200px;
padding-top: 30px;
text-align: center;
background-color: @c-bg;
}
.footer {
margin-top: auto;
flex-shrink: 0;
height: 100px;
background: #222222;
padding: 30px 0 0 0;
text-align: center;
color: #ffffff;
}
}
复制代码多重边框
HTML：
<main>
<div></div>
<div></div>
</main>
CSS:
main {
width: 100%;
padding: 0 10vh;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
div:nth-of-type(1) {
text-align: center;
vertical-align: middle;
width: 60px;
height: 60px;
border-radius: 50%;
background: #ffffff;
margin: 105px 29px;
box-shadow: 0 0 0 10px #117ce9, 0 0 0 20px #187ed6, 0 0 0 30px #0261b5, 0 0 0 40px #0061b5, 0 0 0 50px #14adea,
0 0 0 60px #0061b5, 0 0 0 70px #08becf, 0 0 0 80px #14adea;
}
div:nth-of-type(2) {
text-align: center;
width: 200px;
height: 120px;
background: #ffffff;
border: 5px solid #187ed6;
outline: #08becf dashed 1px;
outline-offset: -10px;
margin-bottom: 20px;
.content {
transform: translateY(50%);
}
}
}
复制代码瀑布流布局
HTML:
<div class="g-container">
<div class="g-queue" v-for="i in 4" :key="i + 'queue'">
<div class="g-item" v-for="j in 3" :key="j + 'item'" :style="'height:' + j * (i + 3) * 5 + 'px'">
</div>
</div>
</div>
复制代码CSS:
.g-container {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
padding: 30px;
.g-queue {
display: flex;
flex-direction: column;
flex-basis: 24%;
background-color: #f9f9f9;
.g-item {
position: relative;
width: 100%;
margin: 2.5% 0;
background-color: #14adea;
border-radius: 4px;
&::after {
content: 'test';
position: absolute;
color: #ffffff;
text-align: center;
font-size: 15px;
line-height: 1.73;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
复制代码