弹性布局

1. 前言

• Flexible Box: 处理某元素内子元素的排列方式

• 页面中任何一个元素都可以指定为 弹性布局( Flex )

• 属性: display

• 取值: 1. flex: 将块级元素变为弹性布局容器

  2. inline-flex: 将行内元素变为弹性布局容器
  3. 兼容性: display: -webkit-flex;......

• 注意: 将元素设置为 flex 后, 子元素的 float, clear 以及 vertical-align 属性将失效

2. 基本概念

• 采用 flex 布局的元素称为 flex容器 ( Flex Container ) -> 简称: 容器
• 它的子元素称为 flex项目( Flex Item ) -> 简称: 项目
• main axis: 主轴 默认为横向轴
• cross axis: 交叉轴 默认为纵向轴
• main start: 主轴的开始位置( 与边框的交叉点 )
• main end: 主轴的结束位置
• cross start: 交叉轴的开始位置
• cross end: 交叉轴的结束位置
• 项目默认沿主轴排列
• main size: 单个项目占据的主轴空间
• cross size: 单个项目占据的交叉轴空间

3. 容器属性

• 该组属性, 要设置在容器( container )元素上, 用于统一的控制子元素的排列方式

3.1. flex-direction:

• 作用: 指定主轴的方向( 决定项目的排列方式 )
• 取值:
  1. row: 主轴为水平方向, 起点在左端 默认值
  2. row-reverse: 主轴为水平方向, 起点在右端
  3. column: 主轴为垂直方向, 起点在上沿
  4. column-reverse: 主轴为垂直方向, 起点在下沿

3.2. flex-wrap:

• 作用: 项目在一条轴线内显示不下所有项目时, 如何换行
• 取值: 1. nowrap: 默认值, 不换行, 会将项目等比缩放 2. wrap: 换行 第一行在上方 3. wrap-reverse: 换行 第一行在下方

3.3. flex-flow:

• 作用: 该属性是 flex-direction 和 flex-wrap 的缩写
• 取值: 1. row nowrap: 默认值 2. direction wrap 的取值

3.4. justify-content:

• 作用: 该属性定义了项目在主轴上的对齐方式
• 取值: 1. flex-start: 主轴起点对齐 2. flex-end: 主轴的终点对齐 3. center: 居中对齐 4. space-between: 两端对齐 两个项目之间的间隔相等 5. space-around: 每个项目两端的间隔相等 -> 项目之间的间隔比项目与父元素边框的间隔大一倍

3.5. align-items:

• 作用: 该属性定义了项目在交叉轴的对齐方式
• 取值: 1. flex-start: 交叉轴的起点 2. flex-end: 交叉轴的终点对齐 3. center: 居中对齐 4. baseline: 项目的第一行文字的基线对齐 5. stretch: 默认值 如果项目未设置高度或高度为 auto 时 那么项目将占满整个容器的高度

3.6. align-content:

• 作用: 容器具备多跟轴线时( 自动换行时 ), 项目的对齐方式
• 取值: 1. flex-start: 项目在交叉轴起点对齐 2. flex-end: 项目在交叉轴终点对齐 3. center: 项目在交叉轴中间对齐 4. space-between: 与交叉轴两端对齐 轴线之间的间隔相等 5. space-around: 每根轴线两端的间隔相等 -> 轴线间间隔比轴线与父元素边框间隔大一倍 6. stretch: 默认值 在不指定项目的高度时 占满整个交叉轴

4. 项目属性

4.1. order:

• 作用: 排序 -> 定义项目的排列顺序 值越小, 越靠前
• 取值: 1. 默认为 0 2. 自定义数值

4.2. flex-grow:

• 作用: 定义放大比例, 如果当前排列轴有空余空间, 项目将如何放大
• 取值: 正数数字
  1. 默认为 0: 不作任何放大处理
  2. 只有一个项目取值为 1: 在有剩余空间时, 取值为 1 的项目将占满剩余的空间
  3. 有多个项目取值为 1: 在有剩余空间时, 取值为 1 的项目将平分剩余空间

4.3. flex-shrink:

• 作用: 该属性定义项目的缩小比例 默认为 1 -> 空间不足时, 等比缩放
• 取值: 正数
  1. 所有项目取值为 1: 当空间不足时, 所有项目等比缩放
  2. 一个项目取值为 0, 其余项目取值为1: 当空间不足时, 取值为0 的项目不缩放, 取值 1 的项目等比缩放

4.4. flex-basis:

• 作用: 指定项目所占据的空间大小 -> 浏览器根据这个属性, 计算主轴是否有多余空间
• 取值: 1. auto: 默认值 项目本身大小 2. length: 指定宽高( 主轴方向 ) -> 项目将占据固定空间

4.5. flex:

• 该属性是 flex-grow、flex-shrink 及 flex-basis 的简写模式

• 取值: 1. auto: 相当于 1 1 auto

  2. none: 相当于 0 0 auto

     建议优先使用这个属性, 而不是单独写三个分离的属性, 因为浏览器会推算相关值

  3. flex-grow flex-shrink flex-basis

4.6. align-self:

• 作用: 单独定义当前项目与其他项目不一样的交叉轴对齐方式, 可以覆盖 align-items 的值 默认值为 auto, 表示继承父元素的 align-items 属性, 如果没有父元素, 则等同于 stretch
• 取值: 1. auto: 自动 集成父元素的 align-items 属性 -> 没有父元素 等同于 stretch 2. flex-start: 交叉轴起点对齐 3. flex-end: 交叉轴终点对齐 4. center: 居中对齐 5. baseline: 交叉轴第一行文本基线对齐 6. stretch: 在不指定项目的高度时 占满整个交叉轴