Flexbox速查表

容器

• display: flex 或 display: inline-flex：为该元素的直接子元素创建一个弹性上下文（或内联弹性上下文）
• flex-direction 确定容器的主轴和交叉轴，有效值为：
• row（默认）：水平方向，与书写方向相同（对于英语是从左到右）
• row-reverse：水平方向，与书写方向相反（对于英语是从右到左）
• column：垂直方向，从上到下
• column-reverse：垂直方向，从下到上
• flex-wrap 确定弹性项目是否尝试在一行中适应，有效值为：
• nowrap（默认）：所有弹性项目都在一行上
• wrap：弹性项目将换行到多行，从上到下
• wrap-reverse：弹性项目将换行到多行，从下到上
• flex-flow：缩写，结合了 flex-direction 和 flex-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：均匀分布项目，将自动大小的项目拉伸以适应容器

项目

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