引言
最近记性特别不好，居然忘记 Flex 布局子项居中怎么写了，于是又看了一遍阮一峰老师的《Flex 布局教程》，为了能够加深记忆，边做记录边练习，因此整理本文作为自学笔记。
本文来源：阮一峰老师的《Flex 布局教程》
Flex 布局又称 "弹性布局" 。任何一个容器都可以指定为 Flex 布局。
采用 Flex 布局的外层元素叫做 “容器” ，子元素叫做 “项”。
容器必须设置下面的代码，才能采用 Flex 布局。
display: flex | inline-flex
inline-flex 代表容器是个行内元素。
容器有两根轴：水平的主轴和垂直的交叉轴。
容器属性
flex-direction
项的排列方向。
.container { flex-direction: row | row-reverse | column | column-reverse;}
row ：默认，水平方向排列，方向起点在左侧。
row-reverse ：水平方向逆向排列，方向起点在右侧。
column ：垂直方向排列，方向起点在顶端。
column-reverse ：垂直方向排列，方向起点在底端。
flex-wrap
项会自动排列在一个方向上，不会换行。如果换行显示，就需要 flex-wrap 属性。
.container { flex-wrap: nowrap | wrap | wrap-reverse;}
wrap ：默认，不换行。
wrap：换行，第一行在上面。
wrap-reverse ：换行，第一行下下面。
flex-flow
flex-direction 属性和 flex-wrap 属性的简写，默认值为 row nowrap 。
.container { flex-flow: | ;}
justify-content
项 (水平) 对齐的方式。根据 flex-direction设置的方向决定水平或垂直对齐。
.container { justify-content: flex-start | flex-end | center | space-between | space-around;}
flex-start ：默认，项左对齐。
flex-end ：项右对齐。
center ：项居中对齐。
space-between ：项两端对齐，项之间的间隔相等。
space-around ：项两侧间隔相等，所以第 1 项和第 2 项与边框的距离要比项之间的距离小 1 倍。
align-items
项 (垂直) 对齐的方式。根据 flex-direction设置的方向决定水平或垂直对齐。
.container { align-items: stretch | flex-start | flex-end | center | baseline;}
stretch ：默认，如果项没有设置高度或者高度为 auto ，则占满整个容器的高度。
flex-start ：顶端对齐。
flex-end ：底端对齐。
center ：居中对齐。
baseline ：baseline ：第一行文字的底端 (基线) 对齐。可以设置项的 line-height 看效果。
align-content
align-content 属性定义如何使用垂直的剩余空间，也就是说如果项只占用一行，这个属性不发挥作用，如果项换行了，则可以设置剩余垂直空间的对齐方式。根据 flex-direction设置的方向决定水平或垂直对齐。
.container { align-content: stretch | flex-start | flex-end | center | space-between | space-around;}
stretch ：默认，占满这个垂直高度。
flex-start ：顶端对齐。
flex-end ：底端对齐。
center ：居中对齐。
space-between ：两端对齐，间隔平均分布。
space-around ：项两侧的间隔都相等。所以，边框和项的距离比项与项之间的距离小 1 倍。
项属性
order
定义项的顺序。数值越小，越靠前，默认为 0 。
.item { order: ;}
例如：
.item-1 { order: 6;}
flex-grow
.item { flex-grow: ; /* 默认 0 */}
定义项的放大比例，默认为 0 ，不放大。
所有项的 flex-grow 属性都为 1 时，如果还有剩余空间，则它们将等分剩余空间。相当于 “份” 的概念。
flex-shrink
项的缩小比例。项仅在默认宽度之和大于容器的时候才会发生缩小，也就是说在容器宽度不够的时候，才缩小，其缩小的比例是依据 flex-shrink 的值进行设置。默认值为 1 。
容器空间不足时，项将等比缩放，如果一个项的 flex-shrink 属性为 0，为 0 的项不缩放。
.item { flex-shrink: ; /* default 1 */}
2、3 项的 flex-shrink 属性为 0。
flex-basis
定义了项占据容器空间的初始大小。默认为 auto ，即项的本来大小，浏览器会根据这个属性，计算容器是否有多余空间。
当设置了项的 width 或 height 时，flex-basis 优先级更高。
.item { flex-basis: | auto; /* 默认 auto */}
例如，给第 2 项同时设置了 width 和 flex-basis ，那么在分配剩余空间前先计算出第 2 项的尺寸，然后再分配剩余空间，同时第 2 项的宽度为 flex-basis 设置的值，因为它的优先级高。
.item-2 { width: 100px; flex-basis: 300px;}
align-self
设置单个项的对齐方式，可覆盖容器的 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果父元素没有 align-items 属性，则等同于 stretch 。根据容器的 flex-direction设置的方向决定水平或垂直对齐。
.item { align-self: stretch | auto | flex-start | flex-end | center | baseline;}
stretch ：如果项没有设置高度或者高度为 auto，且没有父元素的 align-items 属性 ，则占满整个容器的高度。
auto ：继承父元素的 align-items 属性，如果父元素没有 align-items 属性，则等同于 stretch 。
flex-start ：顶端对齐。
flex-end ：底端对齐。
center ：居中对齐。
baseline ：第一行文字的底端 (基线) 对齐。可以设置 line-height 看效果。
flex
flex-grow , flex-shrink 、flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
.item { flex: none | auto | [ || ]}
none ：为 0 0 auto 。
auto ：就是默认值 1 1 auto 。
flex:1; 代表按照容器减去其它项后的尺寸，然后该容器填满这个尺寸。相当于 flex-grow: 1; 。
总结
水平位置和垂直位置对齐要根据容器的 flex-direction设置。
本文非原创，根据阮一峰老师《Flex 布局教程》自学整理。对于我个人不好理解的词句，多读了几遍，用我个人理解的意思表达，但整体思路和顺序，依然遵循阮一峰老师的文章。
最近记性特别不好，居然忘记 Flex 布局子项居中怎么写了，于是又看了一遍阮一峰老师的《Flex 布局教程》，为了能够加深记忆，边做记录边练习，因此整理本文作为自学笔记。
本文来源：阮一峰老师的《Flex 布局教程》
