笔记

Appearance

大纲

弹性容器模型 ​

flex-box.png

  • 弹性容器(flex container): 采用 flex 布局的父级元素
  • 弹性项目(flex item): 弹性容器内的子元素，或称 弹性元素
  • 主轴(main axis): 弹性容器中弹性元素的主要布局方向
  • 主轴起点(main start)、主轴终点(main end): 弹性容器中弹性元素在主轴上被放置的位置区域
  • 主轴尺寸(main size): 弹性元素在主轴区域内的长度
  • 侧轴(cross axis): 垂直于主轴的轴
  • 侧轴起点(cross start)、侧轴终点(cross end): 弹性容器中弹性元素在侧轴上被放置的位置区域
  • 侧轴尺寸(cross size): 弹性元素在侧轴区域内的长度

设置元素为弹性容器 ​

  • 说明
    • 通过指定 display: flex; 设置元素为块级弹性容器
    • 通过指定 display: inline-flex; 设置元素为行内弹性容器
  • 注意
    • 指定元素为弹性容器后，其弹性元素的 float、clear、vertical-align 属性将失效

弹性容器属性 ​

flex-direction ​

  • 说明
    • 指定弹性容器的主轴方向
  • 取值
    • row: 主轴为水平轴，方向同文本方向
    • row-reverse: 主轴为水平轴，方向逆文本方向
    • column: 主轴为垂直轴，方向为自上而下
    • column-reverse: 主轴为垂直轴，方向为自下而上
  • 默认
    • row
  • 注意
    • 弹性容器的文本方向可以通过 dir 属性控制，其值为 ltr (从左向右) 或 rtl (从右向左)，默认为 ltr
    • 当指定主轴为 row 或 row-reverse 时，主轴方向依据于弹性容器的文本方向
    • 当指定主轴为 column 或 column-reverse 时，侧轴方向依据于弹性容器的文本方向

flex-wrap ​

  • 说明
    • 指定弹性容器是否允许多行显示以及允许多行下的行堆叠方向
  • 取值
    • nowrap: 不换行
    • wrap: 弹性元素若溢出则换行，方向同侧轴方向
    • wrap-reverse: 弹性元素溢出换行，方向逆侧轴方向
  • 默认
    • nowrap
  • 注意
    • 指定为 nowrap 时，若弹性元素主轴尺寸之和超出主轴长度，则进行收缩处理
    • 收缩时按照 flex-shrink 属性进行收缩
    • 若收缩时达到文本内容最小填充尺寸，则该收缩元素停止收缩

flex-flow ​

  • 说明
    • 该属性为 flex-direction 和 flex-wrap 的复合属性
  • 取值
    • <direction> <wrap>
  • 默认
    • row nowrap

justify-content ​

  • 说明
    • 指定弹性容器中每一行弹性元素在主轴上的对齐方式
  • 取值
    • flex-start: 对齐方向为 主轴起点 向 主轴终点
    • flex-end: 对齐方向为 主轴终点 向 主轴起点
    • center: 对齐方式为 居中对齐
    • space-between: 对齐方式为 两端对齐。相邻弹性元素间距相同，每行首位元素与行首对齐，末位元素与行尾对齐
    • space-around: 指齐方式为 均匀分布。相邻弹性元素间距相同，每行首位元素与行首的间距和末位元素与行尾的间距为相邻元素间距的一半
  • 默认
    • flex-start

align-content ​

  • 说明
    • 指定弹性容器中多行在侧轴上的对齐方式，不适用于单行弹性容器
  • 取值
    • flex-start: 对齐方向为 侧轴起点 向 侧轴终点
    • flex-end: 对齐方向为 测轴终点 向 测轴起点
    • center: 对齐方式为 居中对齐
    • space-between: 对齐方式为 两端对齐。相邻行间距相同，首行与侧轴起点对齐，末行与侧轴终点对齐
    • space-around: 对齐方式为 均匀分布。相邻行间距相同，首行与侧轴起点的间距和末行与侧轴终点的间距为相邻行间距的一半
    • stretch: 拉伸所有行以填满剩余空间，剩余空间均分给每一行
  • 默认
    • stretch

align-items ​

  • 说明
    • 指定弹性容器中每一行弹性元素在侧轴上的对齐方式
  • 取值
    • flex-start: 对齐方向为 测轴起点 向 测轴终点
    • flex-end: 对齐方向为 测轴终点 向 测轴起点
    • center: 对齐方式为 居中对齐。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
    • baseline: 对齐方式为 基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
    • stretch: 指定弹性元素当前行上沿侧轴方向被拉伸到与该行相同的高度或宽度。
  • 默认
    • stretch

弹性元素属性 ​

order ​

  • 说明
    • 指定弹性元素的布局顺序，数值越小，排序越前，同值弹性元素依照 DOM 中的顺序排列
  • 取值
    • <integer>: 整数
  • 默认
    • 0

align-self ​

  • 说明
    • 指定弹性元素在当前行上沿侧轴的对齐方式，
    • 该属性会覆盖弹性容器中 align-items 的效果，
    • 若任何弹性元素的侧轴方向的 margin 设置为 auto，则忽略该属性
  • 取值
    • auto: 指定为父元素的 align-items 值，若无父元素则设置为 stretch
    • flex-start: 对齐方向为 测轴起点 向 测轴终点
    • flex-end: 对齐方向为 测轴终点 向 测轴起点
    • center: 对齐方式为 居中对齐。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
    • baseline: 对齐方式为 基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
    • stretch: 指定弹性元素当前行上沿侧轴方向被拉伸到与该行相同的高度或宽度。
  • 默认
    • auto

flex-grow ​

  • 说明
    • 如果主轴存在剩余空间，则按照该属性值对剩余空间进行划分，弹性元素在主轴上进行响应的拉伸
    • 弹性元素主轴尺寸获得的尺寸为 (grow/sum(grow)) * 主轴剩余尺寸
    • 拉伸的尺寸与当前弹性元素自身主轴尺寸无关
  • 取值
    • <num>: 非负数
  • 默认
    • 0: 表示即使存在剩余空间也不会进行拉伸

flex-shrink ​

  • 说明
    • 当弹性元素默认主轴尺寸之和大于容器主轴长度时，弹性元素在主轴上进行收缩
    • 收缩的尺寸为 (main size * shrink / sum(main size * shrink)) * 超出尺寸
    • 收缩的尺寸与元素自身主轴尺寸有关
    • 弹性容器需指定为 wrap: nowrap
  • 取值
    • <num> 正数
  • 默认
    • 1

flex-basis ​

  • 说明
    • 指定弹性元素在主轴上的初始大小
    • 该值会替代弹性元素宽度或高度(取决于主轴方向)
  • 取值
    • auto: 同元素尺寸
    • <num><unit>: 自定义值。 num 为非负数，unit 为单位
  • 默认
    • auto

flex ​

  • 说明
    • 该值为 flex-grow、flex-shrink、flex-basis 的复合属性
  • 取值
    • <grow> <shrink> <basis>
    • auto: 相当于 flex: 1 1 auto;
    • initial: 相当于 flex: 0 1 auto;
    • none: 相当于 flex: 0 0 auto;
  • 默认
    • 0 1 auto