20.flex布局

概念

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

两个重要概念：

• 开启了 flex 布局的元素叫 flex container
• flex container 里面的直接子元素叫做 flex items

当flex container中的子元素变成了flex item时, 具备一下特点:

• flex items的布局将受flex container属性的设置来进行控制和布局;
• flex items 不再严格区分块级元素和行内级元素;
• flex items 默认宽高由内容撑开, 可以设置宽高;

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

display:flex flex container 以 block-level 形式存在

display:inline-flex flex container 以 inline-level 形式存在（基本不用）

flex布局模型

flex container 上的 CSS 属性

flex-direction属性

默认项目都是沿着，主轴从 main start 开始往 main end 方向排布。

四个值：

• flex-direction:row（默认值）主轴为水平方向，起点在左端。
• flex-direction:row-reverse主轴为水平方向，起点在右端。
• flex-direction:column主轴为垂直方向，起点在上沿。
• flex-direction:column-reverse主轴为垂直方向，起点在下沿。

flex-wrap属性

默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

• flex-wrap:nowrap (默认)单行

• flex-wrap:wrap 多行

• flex-wrap:wrap-reverse 多行（对比 wrap，cross start 与 cross end 相反）

flex-flow属性

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

justify-content属性

定义项目在主轴上的对齐方式

• justify-content:flex-start（默认值）：与 main start 对齐

• justify-content:flex-end 与 main end 对齐

• justify-content:enter 居中对齐

• justify-content:space-between 两端对齐，项目之间的距离相等。

• justify-content:space-around

• 项目之间的距离相等

• 两端的项目与 main start、main end 之间的距离是 flex items 之间距离的一半

• justify-content:space-evenly 项目之间的距离相等，平分所有剩余空间。

align-items属性

定义项目在交叉轴上的对齐方式

• align-items:stretch（默认值）项目的高度未设置，所以初始值为auto，将拉伸占满整个容器的高度。
• align-items:flex-start 交叉轴起点对齐
• align-items:flex-end 交叉轴终点对齐
• align-items:center 居中对齐对齐
• algin-items:baseline 项目之间的文字的基线对齐

align-content属性

决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似，只有一行该属性不生效。

• stretch（默认值）：与 align-items 的 stretch 类似，轴线占满整个交叉轴。

• flex-start：与交叉轴起点对齐

• flex-end：与 交叉轴终点对齐

• center：居中对齐

• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

• space-evenly： flex items 之间的距离相等，平分所有剩余空间。

flex items 上的 CSS 属性

order属性

order决定了项目的排布顺序。

• 默认值是0
• 可以设置任意整数，值越小就排在越前面。

flex-grow属性

flex-grow属性定义项目的扩大比例，默认为0，即如果存在剩余空间，也不扩大。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-grow:1 缩写形式 flex:1 通常用来拉升剩余空间，非常灵活。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。