css的flex

flex-direction：flex-direction属性决定子元素的排列方向。

row（默认）：所有项目(子元素)从左到右排列

row-reverse：所有项目(子元素)从右到左排列

column：所有(项目子元素)从上到下排列

column-reverse：所有项目(子元素)从下到上排列

flex-wrap：flex布局下的所有项目(子元素)默认排在一行，所有项目(子元素)的宽度之和超过父元素也不换行，而是按比例缩小所有项目(子元素)宽度，如果希望所有项目(子元素)的宽度之和超过父元素后换行，需要设置flex-wrap。

nowrap（默认）：不换行

wrap：换行

wrap-reverse：换行，项目(子元素)从下到上排列，即第一行在最下方，第二行在第一行上方

flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，即所有项目(子元素)从左到右排列且不换行。

justify-content：所有项目(子元素)在设置flex布局的父元素(flex容器)中横向的位置（所有项目(子元素)的宽度之和只占父元素(flex容器)宽度一部分的情况下）。

flex-start（默认）：居左

flex-end：居右

center： 居中

space-between：两端对齐，子元素之间的间隔都相等

space-around：子元素两侧的间隔相等

align-items：子元素在父元素中纵向的位置（子元素的高度只占父元素高度一部分的情况下）主要用于单行子元素，但多行也有效果。

单行效果如下：

flex-start：：居上

flex-end：居下

center：居中

baseline: 子元素的第一行文字的基线对齐

stretch（默认）：如果子元素未设置高度或设为auto，将占满整个容器的高度

多行效果如下：

flex-start：：每行下方间隔相等

flex-end：每行上方间隔相等

center：每行上下间隔相等，所以最上边行和最下边行离边的间隔只有每行间隔的一半

baseline: 子元素的每一行文字的基线对齐

stretch（默认）：每行下方间隔一样

align-content：多行子元素在父元素中纵向的位置，如果只有一行，该属性不起作用。多行子元素情况下，同时设置align-items和align-content，只有align-content生效。

flex-start：居上

flex-end：居下

center：居中排列

space-between：上下两端对齐，每行之间的间隔相等

space-around：每行上下间隔相等，所以最上边行和最下边行离边的间隔只有每行间隔的一半

stretch（默认值）：下方间隔相等