0%
Flexbox 属性表
弹性盒布局通常是一个容器包含若干内容,对应的样式是描述内容在容器中如何排布。
容器属性
display
布局方式
属性值 | 解释 |
---|---|
flex | 使用弹性盒布局 |
flex-direction
主轴的方向
默认值:row
属性值 | 解释 |
---|---|
row | 水平方向为主轴,正向为从左到右。 |
row-reverse | 水平方向为主轴,且方向逆转,正向为从右到左。 |
column | 垂直方向为主轴,正向为从上到下。 |
column-reverse | 垂直方向为主轴,且方向逆转,正向为从下到上。 |
justify-content
主轴上的排列方式。
默认值:flex-start
属性值 | 解释 |
---|---|
flex-start | 子元素在主轴上居正向起点排列。 |
flex-end | 子元素在主轴上居正向终点排列。 |
center | 子元素在主轴上居中排列。 |
space-between | 子元素在主轴上,两边的元素在父元素的起点和终点,且每个子元素中间间隔相同。 |
space-around | 子元素在主轴上,每个子元素之间间隔相同。 |
space-evenly | 子元素在主轴上均匀排列,每两个子元素之间、两边的子元素到父元素边界的距离均相同。 |
align-items
交叉轴上的排列方式。
默认值:stretch
属性值 | 解释 |
---|---|
flex-start | 子元素在交叉轴上居正向起点排列。 |
flex-end | 子元素在交叉轴上居正向终点排列。 |
center | 子元素在交叉轴上居中排列。 |
baseline | 子元素会根据各自内部第一行文本的基线对齐。 |
stretch | 如果弹性盒没有高度,或默认高度为 auto ,那么子元素会拉伸以填满整个父元素。 |
flex-wrap
主轴上的内容超出的容器的范围,是否自动换行。
默认值:nowrap
属性值 | 解释 |
---|---|
nowrap | 不换行 |
wrap | 换行 |
wrap-reverse | 换行,但是换出去的行会在反方向上 |
flex-flow
是 flex-direction
和 flex-wrap
的缩写,同时接收这两个参数。
内容属性
order
order
是内容在容器中的顺序值,容器中的内容会按整数顺序从小到大排列。
接收正负整数,默认值是 0
。
align-self
单个内容元素在交叉轴上的排列方式。接收的值与 align-items
相同。
默认值与父元素的 align-items
相同,设置此属性后会覆盖从父元素继承而来的 align-items
。
属性值 | 解释 |
---|---|
flex-start | 只有自己在交叉轴上居正向起点排列。 |
flex-end | 只有自己在交叉轴上居正向终点排列。 |
center | 只有自己在交叉轴上居中排列。 |
baseline | 只有自己会根据各自内部第一行文本的基线对齐。 |
stretch | 如果弹性盒没有高度,或默认高度为 auto ,只有自己会拉伸以填满整个父元素。 |
align-content
在使用 wrap
换行的情况下,多行整体在交叉轴的排列方式。
没有换行的时候不起作用。
默认值:stretch
属性值 | 解释 |
---|---|
flex-start | 在交叉轴上居正向起点排列。 |
flex-end | 在交叉轴上居正向终点排列。 |
center | 在交叉轴上居中排列。 |
space-between | 在交叉轴上,两边的元素在父元素的起点和终点,且每个子元素中间间隔相同。 |
space-around | 在交叉轴上,每个子元素之间间隔相同。 |
space-evenly | 在交叉上均匀排列,每两个子元素之间、两边的子元素到父元素边界的距离均相同。 |
stretch | 在交叉轴上拉伸以适应容器。 |