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
值排序,然后按其源代码顺序排序
- 如果使用不正确,可能会导致可访问性问题