CSS-布局-flex

CSS3 新增了弹性盒子模型( Flexible Box 或 FlexBox )，是一种新的用于在 HTML 页面实现布局的方式。使得 HTML 页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。

基本概念

• 容器：使用 display:flex 或 display:inline-flex 声明的元素，称为 Flex 容器（flex container），简称 容器
• 项目：容器中所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称 项目
• 主轴：项目沿其一次排列的轴被称为 主轴。
• 侧轴：垂直于主轴的轴被称为 侧轴。

容器的属性

• flex-direction
  • 定义了 主轴 的方向
    • row：主轴为水平方向，起点在左端（默认）
    • row-reverse：主轴为水平方向，起点在右端
    • column：主轴为垂直方向，起点在上沿
    • column-reverse：主轴为垂直方向，起点在下沿
• flex-wrap
  • 默认情况，所有项目会在一行显示，如需换行，使用 flex-wrap
    • nowrap：不换行（默认）
    • wrap：换行，第一行在上方
    • wrap-reverse：换行，第一行在下方
• flex-flow
  • 该属性是 flex-direction 和 flex-wrap 的简写，默认值为 row nowrap，水平排列，不换行。
• justify-content
  • 定义了项目沿着 主轴线 的对齐方式
    • flex-start: 项目左对齐（默认）
    • flex-end: 项目右对齐
    • center: 项目居中对齐
    • space-between: 项目两端对齐，容器首尾不留距离，项目之间的间隔都相等
    • space-around: 项目两端对齐，容器首尾留有距离
• align-items（适用于不换行的情况）
  • 定义了项目所在 侧轴线 的对齐方式
    • flex-start: 侧轴 起点对齐，如果 flex-direction:row，则项目顶部对齐
    • flex-end: 侧轴 终点对齐，如果 flex-direction:row，则项目尾部对齐
    • center: 项目居中对齐
    • baseline: 项目的 第一行文字的基线 对齐
    • stretch: 如果项目 未设置高度 或者 设为auto，拉伸与容器同高（默认）
• align-content（多行情况时适用）
  • 定义了项目所在侧轴线的对齐方式
    • flex-start: 侧轴 起点对齐
    • flex-end: 侧轴 终点对齐
    • center: 侧轴 居中对齐
    • space-between: 两端对齐，容器首尾不留距离
    • space-around: 两端对齐，容器首尾留有距离
    • stretch: 如果项目 未设置高度 或者 设为auto，拉伸与容器同高（默认）

项目属性

• order：项目的排列顺序
  • 数值越小，排列越靠前，可以为负值
    • order:0，保持项目原来的位置（默认）
• flex-grow（扩大）：定义项目的放大比例
  • 默认为0：如果容器存在剩余空间，保持原大小，不放大
  • 项目flex-grow属性都为1：项目平均分配剩余空间
  • 某个项目flex-grow属性为2，其他项目都为1，那么为2的项目宽度为1的2倍
• flex-shrink（缩小）：定义项目的缩小比例
  • 默认为1：如果容器空间不足，项目缩小
  • 项目flex-shrink属性都为1，当容器空间不足时，所有项目等比缩小
  • 某个项目flex-shrink属性为0，其他项目都为1，当容器空间不足时，为0的项目不缩小
• flex-basis：分配多余空间之前，项目占据主轴空间的大小，相当于为项目设置宽度
  • 默认值：auto，保持项目的本来大小，不作任何宽度改变
  • 可以定义项目的宽度（如200px）
  • 也可以设置 flex-basis:10%，将占据空间的10%
• flex：flex-grow flex-shrink flex-basis的缩写
  • 默认值：0 1 auto，不放大，但缩小；
  • auto（1 1 auto）：等分放大缩小
  • none（0 0 auto）：不放大，不缩小
  • flex:1 相当于只设置了flex-grow
• align-self：定义项目在侧轴的对齐方式。该属性可覆盖 align-items 属性。
  • 默认值为 auto，表示继承父元素的 align-items 属性
  • center: 伸缩项目向侧轴的中间位置对齐。
  • flex-start: 伸缩项目向侧轴的起点位置对齐。
  • flex-end: 伸缩项目向侧轴的终点位置对齐。
  • baseline: 伸缩项目根据伸缩项目的基线对齐。
  • stretch: 默认值，伸缩项目拉伸填充整个伸缩容器。