Flex是Flexible Box的缩写，意为弹性布局，用来为盒子模型提供最大的灵活性、任何一个容器都可以指定为Flex布局。本篇博客全面的讲解了Flex布局的属性，快速入门Flex布局，那么接下来我们谈谈CSS Flexbox弹性布局。
首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性：
flex-direction (元素排列方向)
row, row-reverse, column, column-reverse
flex-wrap (换行)
nowrap, wrap, wrap-reverse
flex-flow (以上两者的简写)
flex-direction || flex-wrap
justify-content (水平对齐方式)
flex-start, flex-end, center, space-between, space-around
align-items (垂直对齐方式)
stretch, flex-start, flex-end, center, baseline
align-content (多行垂直对齐方式)
stretch, flex-start, flex-end, center, space-between, space-around
容器的六个属性
项目的属性：
order 排列顺序，数值，默认0
"integer"
flex-grow 如图示7，定义放大比例，默认0，即如果存在剩余空间，也不放大。
"number"
flex-shrink 如图示8，定义缩小比例，默认1，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
"number"
flex-basis 定义项目占据的主轴空间，默认auto。会根据flex-direction定义的主轴（水平或者垂直），定义项目本来的大小，跟width或者height一样。
flex 推荐，以上三个的缩写，默认 0 1 auto
"flex-grow" "flex-shrink" "flex-basis"
align-self 如图示9，单个项目有与其他项目不一样的对齐方式，可覆盖align-items
"auto","flex-start","flex-end","center","baseline","stretch"
1.flex-direction
row (从左往右)默认
row-reverse (从右往左)
column (从上往下)
column-reverse (从下往上)
2.flex-wrap
nowrap (不换行)默认
wrap (换行，且往下一行换)
wrap-reverse (换行，且往上一行换)
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
3.flex-flow，是flex-direction和flex-wrap的简写形式
flex-flow:<flex-direction> || <flex-wrap>;
4.justify-content
flex-start
flex-end
center
space-between
space-around
5.align-items
stretch 默认
flex-start
flex-end
center
baseline 项目第一行文字的基准线对齐
6.align-content
stretch 默认
flex-start
flex-end
center
space-between
space-around
项目属性：Flex项目有6个可用属性
1. order
定义项目的排列顺序。数值越小，排列越靠前，默认为0：order: <integer>;
.item {
order: <integer>;
}
2. flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大: flex-grow: <number>;
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
.item {
flex-grow: <number>; /* default 0 */
}
3. flex-shrink
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小: flex-shrink: <number>;
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对概述行无效。
.item {
flex-shrink: <number>; /* default 1 */
}
4. flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）: flex-basis: <length>;
浏览器根据这个属性，计算主轴是否有多余空间。
它的默认值为auto，即项目的本来大小。
可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
.item {
flex-basis: <length> | auto; /* default auto */
}
5. flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，后两个属性可选: flex: none | <> | <>;
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
6. align-self
允许单个项目有与其他项目不同的对齐方式: align-self: auto | flex-start | flex-end | center | baseline | stretch;
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
以上就是Flex布局的详细介绍，本编博客参考了阮一峰的博客。
网友评论