flex布局

本文章归纳总结自B站ilovecoding老师及PPT。

一、认识flex布局

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container，此时开启了flex 布局：

• flex： flex container 以 block-level 形式存在
• inline-flex： flex container 以 inline-level 形式存在

flex container 里面的直接子元素叫做 flex items。

二、flex布局模型

主轴和交叉轴：

三、flex的相关属性

应用在 flex container 上的 CSS 属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content。

应用在 flex items 上的 CSS 属性：flex、flex-grow、flex-basis、flex-shrink、order、align-self。

1.flex container

1.1 flex-direction

flex-direction 决定了 main axis 的方向，

（flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布）

有 4 个取值：

• row（默认值：左→右）
• row-reverse（右→左）
• column（上→下）
• column-reverse（下→上）。

1.2 justify-content

justify-content 决定了 flex items 在 main axis 上的对齐方式：

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

• flex-end：与 main end 对齐

• center：居中对齐

• space-between：

  • flex items 之间的距离相等

  • 与 main start、main end两端对齐

• space-evenly：

  • flex items 之间的距离相等

  • flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

• space-around：

  • flex items 之间的距离相等

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

1.3 align-items

align-items 决定了 flex items 在 cross axis 上的对齐方式：

• normal：在弹性布局中，效果和stretch一样
• stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
• flex-start：与 cross start 对齐
• flex-end：与 cross end 对齐
• center：居中对齐
• baseline：与基准线（第一个item文本）对齐

1.4 flex-wrap

flex-wrap 决定了 flex container 是单行还是多行：

• nowrap（默认）：单行（会对item进行压缩并扩大flex container）
• wrap：多行
• wrap-reverse：多行（在交叉轴上反向）

1.5 flex-flow

flex-flow 是 flex-direction || flex-wrap 的简写：可以省略，顺序任意

1.6 align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似：

• stretch（默认值）：与 align-items 的 stretch 类似

• flex-start：与 cross start 对齐

• flex-end：与 cross end 对齐

• center：居中对齐

• space-between：

  • flex items 之间的距离相等

  • 与 cross start、cross end两端对齐

• space-around：

  • flex items 之间的距离相等

  • flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

• space-evenly：

  • flex items 之间的距离相等

  • flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

2. flex items

2.1 order

order 决定了 flex items 的排布顺序：

可以设置任意整数（正整数、负整数、0），值越小就越排在前面。默认值是 0。

2.2 flex items

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

• auto（默认值）：遵从 flex container 的 align-items 设置
• stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

2.3 flex-grow

flex-grow 决定了 flex items 如何扩展：

• 可以设置任意非负数字（正小数、正整数、0），默认值是 0。0 表示不扩展；
• 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效；
• 如果所有 flex items 的 flex-grow 总和超过 1，则每个 flex item 扩展为：size*(flex-grow/sum)；
• 如果所有 flex items 的 flex-grow 总和不超过 1，则每个 flex item 扩展为：size*flex-grow；

（size 为 base size；sum 为所有 flex item 的 flex-grow 之和；以下同）

2.4 flex-shrink

flex-shrink 决定了 flex items 如何收缩：

• 可以设置任意非负数字（正小数、正整数、0），默认值是 1。0 表示不收缩；

• 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效；

• 如果所有 flex items 的 flex-shrink 总和超过 1，则每个 flex item 收缩为：size*(flex-shrink/sum)；

• 如果所有 flex items 的 flex-shrink 总和 sum 不超过 1，每个 flex item 收缩为：size*flex-shrink；

2.5 flex-basis

flex-basis 用来设置 flex items 在 main axis 方向上的 base size：

• auto（默认值）
• 具体的宽度数值（100px）

2.6 flex

• flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

• 单值语法: 值必须为以下其中之一:

  • 一个无单位数(<number>): 它会被当作<flex-grow>的值。

  • 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。

  • 关键字none，auto或initial.

• 双值语法:

  • 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
  • 第二个值必须为以下之一：
    • 一个无单位数：它会被当作 <flex-shrink> 的值。
    • 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

• 三值语法:

  • 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
  • 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
  • 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。

3. 优先级高到低

决定 flex items 最终 base size 的因素，从优先级高到低

1. max-width\max-height\min-width\min-height
2. flex-basis
3. width\height
4. 内容本身的 size

完结
——"Learning is the accumulation of experience, and ability is hard-working patience."