Flex弹性布局

Flexible Box Layout Mode 

main size：主轴 cross size：交叉轴

Flex属性 约定了一套设置项目的大小、排列、排序的规则 display: flex;

flex-direction 规定灵活项目的方向 flex-direction:row / row-reverse / column / column-reverse / initial / inherit; /*参数说明： - row：水平正向排列（默认） - row-reverse：水平反向排列 - column：垂直正向排列 - column-reverse：垂直反向排列 - initial：设置该属性为它的默认值 - inherit：从父元素继承该属性 */

flex-wrap 规定灵活项目是否拆行或拆列 flex-wrap:nowrap / wrap / wrap-reverse / initial / inherit; /*参数说明： - nowrap：不换行（默认） - wrap：换行 - wrap-reverse：换行（上下行颠倒） - initial：设置该属性为它的默认值 - inherit：从父元素继承该属性 */

flex-flow：flex-direction flex-wrap 复合属性

justify-content 设置子元素在主轴上的对齐模式 justify-content: flex-start / flex-end / center / space-between / space-around / initial / inherit; /*参数说明： - flex-start：项目位于容器的开头（默认） - flex-end：项目位于容器的结尾 - center：项目位于容器的中心 - space-between：项目位于各行之间留有空白的容器内 - space-around：项目位于各行之前、之间、之后都留有空白的容器内 - initial：设置该属性为它的默认值 - inherit：从父元素继承该属性 */

align-items 设置子元素在交叉轴上的对齐模式 align-items: stretch / center / flex-start / flex-end / baseline / initial / inherit; /*参数说明： - stretch：项目被拉伸以适应容器（默认） - center：项目位于容器的中心 - flex-start：项目位于容器的开头 - flex-end：项目位于容器的结尾 - baseline：项目位于容器的基线（以内容为准）上 - initial：设置该属性为它的默认值 - inherit：从父元素继承该属性 */

align-content 控制容器内多行在交叉轴上的排列方式 align-content: stretch / center / flex-start / flex-end / space-between / space-around / initial / inherit; /*参数说明： - stretch：项目被拉伸以适应容器（默认） - center：项目位于容器的中心 - flex-start：项目位于容器的开头 - flex-end：项目位于容器的结尾 - space-between：项目位于各行之间留有空白的容器内 - space-around：项目位于各行之前、之间、之后都留有空白的容器内 - initial：设置该属性为它的默认值 - inherit：从父元素继承该属性 */

order 定义项目的排列顺序 order: <integer>; /*使用说明： - 与主轴方向有关（默认为主轴方向） - 数值越小，排列越靠前，默认为0*/

flex-grow 定义项目的放大比例 flex-grow: <number>; /*使用说明： - 需要主轴方向上有多余的空间可以让项目去“伸展”； - 如果所有的项目有一样的flex-grow，它们会等分多余的空间； - 值越大，占比越多，不能为百分比； - 默认值为0，表示不去放大*/

flex-shrink 定义了项目的缩小比例 flex-shrink: <number>; /*使用说明： - 需要主轴方向上的空间不够，项目被压缩； - 值越大，被压缩的越多； - 值越小，被压缩的越小； - 默认值为1，项目缩小*/

flex-basis 定义了在分配多余空间之前，项目占据的主轴空间 flex-basis: <length> / auto; /*使用说明： - 值可以是像素px，也可以是百分比； - 默认值为auto，即项目的本来大小*/

flex flex-grow, flex-shrink 和 flex-basis的复合属性 flex: none / <'flex-grow'> || <'flex-shrink'> || <'flex-basis'> /*使用说明： - 两个快捷键：auto（1 1 auto）、 none（0 0 auto）; - 只写一个数值，则表示flex-grow，后面两个为 1 0； - 默认值为：0 1 auto（后两个属性为可选）*/

align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 align-self: auto / flex-start / flex-end / center / baseline / stretch; /*使用说明： - 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch*/