Flex布局

Flex布局

Flex布局，Flexiable box，即弹性布局。
指定Flex布局

.box {
    display: flex;
}

行内元素

.inline-box {
    display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀

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

Flex容器

Flex容器，采用Flex布局的元素；它的所有子元素自动成为Flex item，称为Flex项目。
容器轴：main axis（主轴），across axis（交叉轴）
主轴开始位置（与边框的交叉点）main start，结束位置main end

容器的属性

容器的六个属性：

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

flex-direction属性

主轴的方向，可能的值：

• row（默认）：水平方向，从左到右

• row-reverse：水平方向，从右到左

• column：垂直方向，从上到下

• column-reverse：垂直方向，从下到上

flex-wrap属性

如果一条轴线排不下，如何处理：

• nowrap（默认）：不换行

• wrap：换行，第一行在上面

• wrap-reverse：换行，第一行在下面

justify-content属性

flex item在main axis上的对齐方式：

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center：居中

• space-between：两端对齐，item之间间隔相等

• space-around：每个item两侧间隔相等

align-items属性

项目在交叉轴上如何对齐

• flex-start：cross轴起点位置

• flex-end: cross轴终点位置

• center： cross轴终点对齐

• baseline：item的第一行文字的基线对齐

• stretch（默认值）：如果项目没有设置高度或设为auto，将占满容器的高度

align-content属性

多根轴线的对齐方式，只有出现多轴的情况下才有效

• flex-start：与cross axis的起点对齐

• flex-end：与cross axis的终点对齐

• center： 终点对齐

• space-between：两端对齐，间隔平均分布

• space-around：轴线两侧的间隔相等

• stretch（默认值）：轴线占满整个cross axis

Flex项目

flex item上的属性

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

order属性

定义项目的排列顺序，排列越小越靠前，默认为0

flex-grow属性

项目的发大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink属性

定义项目的缩小比例，默认1，如果空间不足，该项目将缩小

flex-basis属性

定义在分配多余空间之前，项目占据main axis空间

flex属性

flex属性是flex-grow flex-shrink flex-basisi的简写，默认值0 1 auto，后两个属性可选
该属性有两个快捷键：auto(1 1 auto)，none(0 0 auto)

align-self属性

定义单个item的对齐方式，可以覆盖flex容器的align-items属性