Flex布局又名弹性布局，相比float+position布局，具有很强大的灵活性，而且目前已经得到了所有浏览器的兼容。
个人认为flex布局非常灵活好用，所以这里参考了阮一峰老师的flex教程以及NEXT课程中的文档，把flex布局的所有属性知识点自己动手实现一遍并总结。
Flex布局的使用
如果想要使用Flex布局，首先需要给容器指定Flex布局。
display: flex;
display: inline-flex; //行内元素也可使用
display: -webkit-flex //Webkit浏览器内核需要加上前缀
在使用了flex布局之后，float，clear，vertical-align将失效。
Flex布局的基本概念
flex布局中，有两个基本概念：
- 容器（flex container）
- 项目（flex item）
如图所示（图片来源网络）：
由图可见，容器中有两根主轴：
- 水平主轴（main axis）
- 开始位置（main start）
- 结束位置（main end）
- 垂直交叉轴（cross axis）
- 开始位置（cross start）
- 结束位置（cross end）
在容器中，项目默认沿着主轴排列，单个项目占据主轴空间叫做（main size），占据的交叉轴空间叫做（cross size）。
容器（flex container）的属性
容器属性有6个：
1. flex-direction
- flex-direction决定了主轴的方向，也就是item排列的方向，有4个值：
-
row（默认值）：主轴为水平方向，左端为起点
-
row-reverse：主轴为水平方向，右端为起点
-
-
column：主轴为垂直方向，上沿为起点
-
column-reverse：主轴为垂直方向，下沿为起点
2. flex-wrap
- flex-wrap属性是规定当一条轴线排列不下item的时候，该如何换行。（item在默认情况下是按照轴线排列成一条线），有三个值：
-
nowrap（默认值）：不换行
-
wrap：换行，第一行在上方
-
wrap-reverse：换行，第一行在下方
-
3.flex-flow
- flex-flow是前两种属性的简写方式，可以写成如下形式：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4. justify-content
- justify-content定义了item在主轴上的对齐方式，可能取5个值
-
flex-start（默认值）：左对齐
-
flex-end：右对齐
-
center：居中
-
space-between：两端对齐，项目之间间隔都相等
-
space-around：每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。
-
5. alien-items
alien-items定义item在交叉轴上如何对齐（此时交叉轴方向为从上至下），有5个值：
-
flex-start：交叉轴的起点对齐
-
flex-end：交叉轴的终点对齐
-
center：交叉轴的中点对齐
-
baseline：项目的第一行文字的基线对齐
这里有一个问题：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。
-
stretch（默认值）：如果item未设置高度或者设置成auto，将占满整个容器宽度
6.align-content
align-content定义了多跟轴线的对齐方式，如果item只有一根轴线，该属性不起作用，有6个值：
-
flex-start：与交叉轴的起点对齐
-
flex-end：与交叉轴的终点对齐
-
center：与交叉轴的中点对齐
-
space-between：与交叉轴两端对齐，轴线之间间隔平均分布
-
space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍
-
stretch（默认值）：轴线占满整个交叉轴
item（子元素）的属性
item的属性有6个：
- order：定义item的排列顺序，数值越小排列越靠前，默认为0。
例如：
将所有item的order属性设置为6、5、4、3、2、1
.item6{
order：6
}
//以此类推
*flex-grow：定义item的放大比例，默认为0，也就是如果有剩余空间，也不放大。
例如：
设置item1的flex-grow属性为2，其余为默认值。
.item1{
flex-grow：2;
}
- flex-shrink：定义item的缩小比例，默认为1，也就是空间不足的时候，此item会缩小。
例如：
给item5设置了flex-shrink属性为0，其他item皆为默认值1，在空间不足的时候，它不缩小。
.item {
flex-shrink：0;
}
- flex-basis:定义了在分配多余空间之前，项目占据的株洲空间。然后浏览器根据这个属性来计算主轴是否有多余的空间。默认值为auto，即item本来的大小。
例如，给item5设置flex-basis属性为100px：
.item5 {
flex-basis：150px;
}
- flex:这个属性是前几种属性的简写，默认值为0 1 auto ，后两个可选。
例如：
item5 {
flex : flex: 2 2 10%;
}
- align-self：允许单个item和其他item有不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有则等同于stretch。
和align-items类似，同样有以下几种值： - auto
- flex-start
- flex-end
- center
- baseline
- stretch
参考资料：
我的个人博客：http://chronosblog.top
我的微信公众号：runtustory
CSS布局详解系列笔记索引：
网友评论