Skip to content

Flexbox速查表

容器

  • display: flexdisplay: inline-flex:为该元素的直接子元素创建一个弹性上下文(或内联弹性上下文)
  • flex-direction 确定容器的主轴和交叉轴,有效值为:
  • row(默认):水平方向,与书写方向相同(对于英语是从左到右)
  • row-reverse:水平方向,与书写方向相反(对于英语是从右到左)
  • column:垂直方向,从上到下
  • column-reverse:垂直方向,从下到上
  • flex-wrap 确定弹性项目是否尝试在一行中适应,有效值为:
  • nowrap(默认):所有弹性项目都在一行上
  • wrap:弹性项目将换行到多行,从上到下
  • wrap-reverse:弹性项目将换行到多行,从下到上
  • flex-flow:缩写,结合了 flex-directionflex-wrap
  • 正式语法:flex-flow: <'flex-direction'> || <'flex-wrap'>
  • justify-content 定义沿主轴的对齐方式,有效值为:
  • flex-start(默认):从起点开始排列弹性项目
  • flex-end:从终点开始排列弹性项目
  • start:从起点开始排列项目
  • end:从终点开始排列项目
  • left:从左侧开始排列项目
  • right:从右侧开始排列项目
  • center:围绕中心排列项目
  • space-around:均匀分布项目,并在它们周围留有相等的空间
  • space-between:均匀分布项目,并在它们之间留有相等的空间
  • space-evenly:均匀分布项目,确保任意两个项目之间的空间相等
  • stretch:均匀分布项目,将自动大小的项目拉伸以适应容器
  • align-items 定义沿交叉轴的对齐方式,有效值为:
  • flex-start(默认):从起点开始排列弹性项目
  • flex-end:从终点开始排列弹性项目
  • start:从起点开始排列项目
  • end:从终点开始排列项目
  • center:围绕中心排列项目
  • baseline:根据基线对齐项目
  • stretch:拉伸项目以填充容器
  • align-content 定义沿交叉轴的额外空间的对齐方式,有效值为:
  • flex-start(默认):从起点开始排列弹性项目
  • flex-end:从终点开始排列弹性项目
  • start:从起点开始排列项目
  • end:从终点开始排列项目
  • center:围绕中心排列项目
  • space-around:均匀分布项目,并在它们周围留有相等的空间
  • space-between:均匀分布项目,并在它们之间留有相等的空间
  • space-evenly:均匀分布项目,确保任意两个项目之间的空间相等
  • stretch:均匀分布项目,将自动大小的项目拉伸以适应容器

Flexbox属性图示

项目

  • flex-grow 确定项目在必要时可以增长多少
  • 接受一个正数(无单位),默认值为 0
  • 指定应将剩余空间中的多少分配给项目
  • 剩余空间是弹性容器的大小减去所有弹性项目的大小之和
  • 如果所有项目具有相同的 flex-grow,则所有项目将平均分配剩余空间
  • 如果不是所有项目具有相同的 flex-grow,则剩余空间按照这些值定义的比例进行分配
  • flex-shrink 确定项目在必要时可以收缩多少
  • 接受一个正数(无单位),默认值为 1
  • 如果所有弹性项目的大小大于弹性容器的大小,则项目根据 flex-shrink 进行收缩以适应
  • flex-basis 确定在分配剩余空间之前项目的初始大小
  • 可以使用任何有效的 width 值、内在大小值、auto(默认值)或 content
  • auto 表示“查看我的 widthheight 属性”,而 content 用于自动调整大小
  • flex:缩写,结合了 flex-growflex-shrinkflex-basis
  • 正式语法:flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  • align-self 允许项目覆盖容器中指定的默认 align-items
  • 有效值与容器中的 align-items 属性相同
  • order 确定项目的排序顺序
  • 接受一个整数值
  • 容器中的项目按升序 order 值排序,然后按其源代码顺序排序
  • 如果使用不正确,可能会导致可访问性问题