flex布局

flex布局

容器：display:flex; position:flexed; (行内元素也可以使用Flex布局：display:inline-flex;)

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1.flex-direction：决定主轴方向（项目排列方向）

• row：水平方向，从左到右
• row-reverse：水平方向，从右到左
• column：垂直方向，从上到下
• column-reverse：垂直方向，从下到上

2.justify-content：项目在主轴上的对齐方式

• flex-start：左对齐
• flex-end：右对齐
• center：项目整体居中
• space-between：两端对齐，间隔相等
• space-around：每个子项目两端间隔相等

3. align-items：内容对齐方式（基于整个项目的高度）

• flex-start：交叉轴的起点对齐。（顶线对齐）
• flex-end：交叉轴的终点对齐。(底线对齐)
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

4.flex-grown：项目放大比例（设置在项目上，不是容器上）

按比例等分容器