flex

flex 是什么？

flex是flexible box 的缩写，意为弹性盒子。

设置flex布局以后，子元素的float、clear、和vertical-align属性将失效。

一、flex 容器的属性

1. flex-direction 排列的方向

• row 默认值，主轴在水平方向，起点在左边
• row-reverse 主轴在水平方向，起点在右边
• column 主轴在垂直方向，起点在上沿
• column-reverse 主轴在垂直方向，起点在下沿

2. flex-wrap 控制换行

• nowrap 默认, 不换行
• wrap 换行, 第一行在上方
• wrap-reverse 换行，第一行在下方

3. flex-flow 是 flex-direction 和 flex-wrap 属性的简写形式，默认值为 row nowrap

4. justify-content 定义了子元素在主轴上的对齐方式

• flex-start 默认值, 左对齐
• flex-end 右对齐
• center 居中对齐
• space-betweent 两端对齐, 每根轴线之间间隔相等
• space-around 每根轴线的两侧间隔相等

5. align-items 定义了子元素在交叉轴上的对齐方式

• flex-start 交叉轴起点对齐
• flex-end 交叉轴终点对齐
• center 交叉轴中点对齐
• baseline 子元素的第一行文字的基线对齐
• stretch 默认值, 如果给子元素设置高度或设为auto, 将占满整个容器的高度

6. align-content 定义了有多行时交叉轴的对齐方式, 单行时不起作用

• flex-start 与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴的中点对齐
• space-betweent 交叉轴两端对齐, 每根轴线之间间隔相等
• space-around 每根轴线的两侧间隔相等
• stretch 默认值, 轴线占满整个交叉轴

子元素的属性

1. order

定义了子元素的排列顺序, 数值越小越靠前,默认为0,

2. flex-grow

定义了子元素的放大比例, 默认为0, 如果空间有剩余，也不放大

3. flex-shrink

定义了子元素的缩写比例, 默认1, 如果空间不足, 该子元素将缩小; 如果为0, 则不缩小

4. flex-basis

定义在分配多余空间之前, 子元素占据的主轴空间。 默认值为auto, 既子元素本来大小。它可以设置跟width和height属性一样的值(比如350px), 则子元素将占据固定空间。

5. flex

是flex-grow、flex-shrink、flex-basis的简写, 默认值为0 1 auto. 后两个属性可选。该属性有两个快捷键 auto(1 1 auto) 和none(0 0 auto).

6. align-self

允许单个元素有与其他元素不一样的对齐方式，可覆盖align-items属性。

• auto 默认值, 继承父元素的align-items
• flex-start
• flex-end
• center
• baseline
• stretch