flex 是flexible box的缩写，意思是“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以设置为flex 布局，但是，设置为flex 布局后，子元素的 float 、clear 、和vertical-align 属性将失效。
设置了 flex 属性的元素称为容器，它的所有子元素会成为容器的成员，也就是项目。
flex 容器可以设置6个属性，分别是：flex-direction 、flex-wrap 、justify-content 、align-items 、align-content 、flex-flow 。
flex 项目可以设置6个属性，分别是：order 、align-self 、flex-grow 、flex-shrink 、flex-basic 、flex 。
下面说一下flex 容器的6个属性的一些取值。
1，flex-direction 属性用来指定多个元素的排列方向，可指定的值如下：
- row 横向排列（默认值）
- row-reverse 横向反向排列
- column 纵向排列
- column-reverse 纵向反向排列
2，flex-wrap 控制换行方式，用来指定单行布局和多行布局，可指定的值如下：
- nowrap 不换行
- wrap 换行
- wrap-reverse 虽然换行，但是换行方向与使用wrap 换行的方向相反
3，justify-content 属性用于指定项目在主轴上的对齐方式，可指定的值如下：
- flex-start 从主轴起点布局所有的子元素 （默认值）
- flex-end 从主轴终点布局所有的子元素
- center 居中布局所有的子元素
- space-between 将第一个元素布局在主轴起点，最后一个元素布局在主轴终点，将空白部分平均分配在所有子元素与子元素之间。
- space-around 将空白部分平均分配在以下几处，如主轴起点与第一个子元素之间、各子元素与子元素之间、最后一个子元素与主轴终点之间。
4，align-items 属性指定的是交叉轴（横向布局时为垂直方向，纵向布局时为水平方向）上的对齐方式，可指定的值如下：
- flex-start 从交叉轴起点布局所有的子元素
- flex-end 从交叉轴终点布局所有的子元素
- center 居中布局所有的子元素
- baseline 项目的第一行文字的基线对齐
- stretch 如果未设置高度或设置为auto ，则占满整个容器的高度
5，align-content 属性指定多行布局时的对齐方式，如果项目只有一行，该属性不起作用。可指定的值如下：
- flex-start 从交叉轴起点布局所有行
- flex-end 从交叉轴的终点布局所有行
- center 居中布局所有行
- space-between 第一行布局在交叉轴起点，最后一行布局在交叉轴终点，将空白部分平均分配在各行之间
- space-around 将空白部分平均分配在以下几处，交叉轴起点与第一行之间、各行与行之间、最后一行与交叉轴终点之间
6，flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。
下面是flex 项目可以设置的属性的一些取值
1，order 属性用来改变项目的显示顺序，数值越小，排列越靠前，默认为0
2，align-self 属性用于单独制定某些子元素的对齐方式。可指定的值如下：
- auto 表示继承父元素的align-items 属性，
- 其它可指定的属性值同align-items 属性的可指定属性值
3，flex-grow 属性指定项目的放大比例，默认为 0 ，即使存在剩余空间，也不放大。可指定的值是一个数字。
如果都为1，则平分剩余空间。如果一个为2，其余的都为1，则前者占据的剩余空间比其他的多一倍。
4，flex-shrink 属性定义项目的缩小比例，默认为1 ，即如果空间不足，项目将会缩小。可指定的值是一个数字。
如果值都为1 ，则空间不足时，所有的项目将等比例缩小。如果一个为0，其余的都为1，则空间不足时，前者不缩小。
5，flex-basic 属性定义了在分配多余的空间之前，项目占据的主轴空间。默认为 auto 即项目的本来大小。它可以设置为和 width 与 height 同样的值，则项目将占据固定空间。
6，flex 属性是 flex-grow flex-shrink 和 flex-basic 的简写，默认值为 0 1 auto ， 后两个值可选。
原文地址：https://www.cnblogs.com/jyfeng/p/8283825.html