CSS-Flex

JacobLJ
385 阅读5分钟

flex 布局 通常也称为: Flexible布局，弹性布局

1、官方文档

2、flex container 和 flex items

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

3、让元素成为 flex container

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

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

4、flex 布局模型

5、应用在 flex container 上的 CSS 属性

  • flex-direction: 设置主轴（main axis）的方向
  • flex-wrap: 设置是否能换行
  • justify-content: 设置flex items在main axis上的对齐方式
  • align-items: 设置flex items在cross axis上的对齐方式（一般是针对单行）
  • align-content: 设置flex items在cross axis上的对齐方式（一般是针对多行）
  • flex-flow: 是flex-direction || flex-wrap的简写

flex-direction

  • flex items 默认都是沿着 main axis（主轴）从main start 开始往 main end方向布局
  • flex-direction 决定了 main axis 的方向, 有 4 个取值
    • row (默认值):主轴水平向左
    • row-reverse: 主轴水平向右
    • column: 主轴竖直下
    • column-reverse: 主轴竖直下

可以注意到，随着主轴的方向变化，cross axis（交叉轴也随之变化），cross axis 只能与 main axis 垂直轴，无论 main axis 如何变化，它只有两个方向：要么向下，要么向右。

justify-content

  • justify-content 决定了 flex items 在 main axis 上的对齐方式，取值如下:
    • flex-start（默认值）: 与 main start 对齐
    • flex-end: 与 main end 对齐
    • center: 在 main axis 上居中对齐
    • 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 之间距离的一半

align-items

  • align-items 决定了（单行） flex items 在 cross axis 上的对齐方式, 取值如下
    • stretch (默认值): 当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
    • flex-start: 与 cross start 对齐
    • flex-end: 与 cross end 对齐
    • center: 居中对齐
    • baseline: 与基准线对齐

flex-wrap

  • flex-wrap 决定了 flex container 是单行还是多行, 取值如下:
    • nowrap (默认): 单行
    • wrap: 多行
    • wrap-reverse: 多行(对比 wrap，cross start 与 cross end 相反)

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 之间的距离

flex-flow

  • flex-flow 是 flex-direction || flex-wrap 的简写
    • 比如 flex-flow: column wrap 等价于
      flex-direction: column
flex-wrap: wrap
    • 比如 flex-flow: row-reverse 等价于
      flex-direction: row-reverse
flex-wrap: nowrap
    • 比如 flex-flow: wrap 等价于
      flex-direction: row 
flex-wrap: wrap

6、应用在 flex items 上的 CSS 属性

  • order: 设置flex items的排布顺序
  • align-self: 允许flex items覆盖flex container设置的align-items
  • flex-grow: 决定了flex items在main axis方向上如何扩展
  • flex-shrink: 决定了flex items在main axis方向上如何收缩
  • flex-basis: 设置flex items在main axis方向上的base size
  • flex: 是flex-grow flex-shrink? || flex-basis的简写

order

  • order 决定了 flex items 的排布顺序
  • 可以设置任意整数(正整数、负整数、0)，值越小就越排在前面
  • 默认值是 0

align-self

  • flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
    • auto (默认值): 遵从 flex container 的 align-items 设置

    • 如下取值效果跟 align-items 一致

    • stretch
    • flex-start
    • flex-end
    • center
    • baseline

flex-grow

  • flex-grow 决定了 flex items 如何扩展
  • 可以设置任意非负数字(正小数、正整数、0)，
  • 默认值是 0
  • 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

    • 如果所有 flex items 的 flex-grow 总和 sum 超过 1（也就是按各个item的flex-grow值的比例），每个 flex item 扩展的 size 为:

      flex container 的剩余 size * (flex-grow / sum)

    • 如果所有 flex items 的 flex-grow 总和不超过 1，每个 flex item 扩展的 size 为:

      flex container 的剩余 size * flex-grow

    • flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-shrink

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

  • 可以设置任意非负数字(正小数、正整数、0)，默认值是 1

      假设container的w为300，有5个item，每个item的w为100，
  则全部设置都为默认值的情况是在container内的items是在主轴方向上压缩排布的，
  实际上最后的item的w是300/5=60

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

    • 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为:

      flex items 超出 flex container 的 size * (收缩比例 / 所有 flex items 的收缩比例之和)

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

      flex items 超出 flex container 的 size * sum * (收缩比例 / 所有 flex items 的收缩比例之和)

    • 收缩比例 = flex-shrink * flex item 的 base size

      base size 就是 flex item 放入 flex container 之前的 size

  • flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-basis

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

    • auto (默认值)
    • content: 取决于内容本身的 size
    • 具体的数字值

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

    • max-width\max-height\min-width\min-height
    • flex-basis
    • width\height
    • 内容本身的 size

    在主轴上平分铺满的例子： container设置：flex-direction:row; flex items设置：flex-basis:0; flex-grow:1;

flex

  • flex 是 flex-grow flex-shrink? || flex-basis 的简写
    • 默认值: 0 1 auto
    • none: 表示的值为0 0 auto
avatar
文章
阅读
粉丝