flex布局是个什么东西？
官方说法：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
民间说法：flex 就是一种布局方式，类似于 block，inline-block等。
flex涉及的概念
Flex的基本作用就是让布局变的更简单，比如"垂直居中"等，当然不止这个，要说清楚flex有什么作用首先要了解一些概念。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
主要记住 “容器”、“项目”、"主轴（横轴）"和"交叉轴（纵轴）"的意思和指向就行。
flex-direction
flex-direction 决定主轴的方向（即项目的排列方向）。它有4个可能的值 ：

1、row（默认值）：主轴为水平方向，起点在容器的左端。

2、row-reverse：主轴为水平方向，起点在容器的右端。

3、column：主轴为垂直方向，起点在容器的上沿。

4、column-reverse：主轴为垂直方向，起点在容器的下沿

flex-wrap
默认情况下容器里变得额所有项目都排在一条线上，flex-wrap定义如果一行排不下 如何换行。它可能的值有三个：
nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content
justify-content 定义了项目在主轴上的对齐方式。它可能的值有5个：
1、flex-start:向主轴的起始位置对齐
也就是从主轴的起始位置开始排列。如果使用flex-direction 属性改变的主轴的方向，那项目对应的排列方式也会变。

.container{
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
}

2、flex-end：向主轴结束位置对齐
也就是从主轴结束的位置开始排列。和flex-start一样也和flex-direction有关。

container{
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
}

3、center： 居中

.container{
   display: flex;
   flex-direction: row;
   justify-content: center;
}

space-between：如果有两个以上的项目，则容器主轴的开始和结束位置各一个，其他的项目均匀排列，项目之间的间隔相等。排列顺序同样和flex-direction有关。如果只有两个项目则一边一个。如果只有一个项目则只在容器主轴的开始位置排列

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。排列顺序同样和flex-direction有关。如果只有一个项目则排列在中间。

align-items
align-items属性定义项目在交叉轴（纵轴）上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性
align-content属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线（一行），该属性不起作用。
如果flex-direction的值是column，则该属性定义了多列的对齐方式。如果项目只有一列，该属性不起左右。
stretch（默认值）：多行占满整个交叉轴。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

flex-grow：定义项目的的放大比例

• 默认为0，即 即使存在剩余空间，也不会放大；
• 所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
• flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
flex-shrink：定义项目的缩小比例

• 默认为1，即 如果空间不足，该项目将缩小；
• 所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
• flex-shrink为0：空间不足时，该项目不会缩小；
• flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间

• 默认值为auto，即 项目原本大小；
• 设置后项目将占据固定空间。
所以flex属性的默认值为：0 1 auto （不放大会缩小）
flex为none：0 0 auto （不放大也不缩小）
flex为auto：1 1 auto （放大且缩小）
flex：1 即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。
中亿丰——何双新