一、Flex布局是什么
Flex是Flexible Box的缩写，即“弹性布局”，用来为盒装模型提供最大的灵活性。
某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性，先看一张图，下文会详细介绍：
flex.jpeg
- 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
- 每根轴都有起点和终点，这对于元素的对齐非常重要。
- 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
- 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴非常重要，所有属性都是作用于轴的。下面从轴入手，将所有flex布局属性串起来理解。
二、Flex基本概念
flex.png
flex的核心概念就是容器和轴。容器包括父容器(flex container)和容器成员(flex item)，轴包括主轴(main axis)和交叉轴(cross axis)，主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
flex.jpg
三、容器的属性
容器的特点：父容器可以统一设置子容器的排列方式，容器成员(item)也可以单独设置自身的排列方式，如果两者同时设置，以容器成员(item)的设置为准。
3.1任何一个容器都能指定为Flex布局
.container {
display: flex | inline-flex; //有两种取值
}
块级元素使用flex，行内元素使用inline-flex。
注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
3.2容器的属性
容器的属性(1).png
父容器有六种属性可以设置
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content
3.2.1flex-direction: 主轴的方向(即项目的排列方向)
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-direction-row.png
row-reverse：主轴为水平方向，起点在右端。
flex-direction-row-reverse.png
column：主轴为垂直方向，起点在上。
flex-direction-column.png
column-reverse：主轴为垂直方向，起点在下。
flex-direction-column-reverse.png
3.2.2flex-wrap: 容器内项目是否可换行
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
flex-wrap-nowrap.png
wrap：项目主轴总尺寸超出容器时换行，第一行在上。
flex-wrap-wrap.png
wrap-reverse：换行，第一行在下。
flex-wrap-wrap-reverse.png
3.2.5flex-flow: flex-direction 和 flex-wrap 的简写形式
.container {
flex-flow: <flex-direction> || <flex-wrap>;
}
3.2.4justify-content：定义了项目在主轴的对齐方式
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
justify-content-flex-start.png
flex-end：右对齐。
justify-content-flex-edn.png
center：居中。
justify-content-center.png
space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
justify-content-space-between.png
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
justify-content-space-around.png
3.2.5align-items: 项目在交叉轴上的对齐方式
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-items-stretch.png
flex-start：交叉轴的起点对齐。
align-items-flex-start.png
flex-end：交叉轴的终点对齐。
align-items-flex-end.png
center：交叉轴的中点对齐。
align-items-center.png
baseline: 项目的第一行文字的基线对齐。
align-items-baseline.png
3.2.6align-content: 多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
3.3Flex项目属性
有六种属性可运用在 item 项目上：
1.order
2.flex-basis
3.flex-grow
4.flex-shrink
5.flex
6.align-self
3.3.1order: 项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0，可为负值
.item {
order: <integer>;
}
order.png
3.3.2flex-basis: 在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
.item {
flex-basis: <length> | auto;
}
flex-basis.png
当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。
3.3.3flex-grow: 定义项目的放大比例
.item {
flex-grow: <number>;
}
flex-grow.png
默认值为 0，即如果存在剩余空间，也不放大。
如果所有项目的 flex-grow 属性都为 1，将等分剩余空间。
当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了，且 flex-wrap：nowrap 时，此时 flex-grow 则不起作用了，这时候就需要接下来的这个属性。
3.3.4flex-shrink: 定义了项目的缩小比例，负值对该属性无效
.item {
flex-shrink: <number>;
}
默认值: 1，即如果空间不足，该项目将缩小。
flex-shrink.png
3.3.5flex: flex-grow, flex-shrink 和 flex-basis的简写
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
3.3.6align-self: 允许单个项目有与其他项目不一样的对齐方式
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
四、总结
关于flex的基本语法基本就是上面这些了，flex并不复杂，用起来也很方便，感兴趣的小伙伴可以好好看一下，如有错误或不严谨的地方，请务必给予指正！
更多属性参考：
[https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
代码地址：Github
网友评论