css flex

css flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。

通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

flex容器属性：

display：指定html元素的盒子类型

flex-direction：指定弹性盒子中元素的排列方式（row：默认值，主轴沿水平方向从左到右；row-reverse:主轴沿水平方向从右到左；column：主轴沿垂直方向从上到下；column-reverse：主轴沿垂直方向从下到上；initial：将此属性设置为属性的默认值；inherit：从父元素继承此属性的值）

flex-wrap：属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行（nowrap：默认值，表示项目不会换行；wrap：表示项目会在需要时换行；wrap-reverse：表示项目会在需要时换行，但会以相反的顺序；initial： 将此属性设置为属性的默认值；inherit：从父元素继承属性的值）

flex-flow:是 flex-direction 和 flex-wrap 两个属性的简写(例如：flex-flow: row-reverse wrap;)

justify-content：用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式（flex-start：默认值：左对齐；flex-end：右对齐；center：居中；space-between：两端对齐，项目之间的间隔是相等的；space-around：每个项目两侧的间隔相等；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值）

align-items：设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式（stretch：默认值，项目将被拉伸以适合容器；center：项目位于容器中央；flex-start：项目位于容器顶部；flex-end：项目位于容器的底部；baseline：项目与容器的基线对齐；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值；）

align-content：align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式（stretch： 默认值，将项目拉伸以占据剩余空间；center：项目在容器内居中排布；flex-start：项目在容器的顶部排列；flex-end；项目在容器的底部排列；space-between：多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部；space-around：多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等；initial：将此属性设置为属性的默认值；inherit：从父元素继承属性的值；）