Flex布局(FlexibleBox)是一种CSS3的布局模式,它提供了一种更加有效的方式来分配和对齐容器内的项目,特别适合于复杂布局和响应式设计的需求。
用于Flex容器的属性
属性 |
可用值及其说明 |
描述 |
display |
- flex:不改变容器的块状属性,使子元素以行内块元素布局。
- inline-flex:使容器表现为行内块元素,子元素以行内块布局,并可自动换行。
|
定义一个元素为Flex容器。 |
flex-direction |
- row:子元素从左到右水平排列。
- row-reverse:子元素从右到左水平排列。
- column:子元素从上到下垂直排列。
- column-reverse:子元素从下到上垂直排列。
|
设置Flex项目在容器中的排列方向。 |
flex-wrap |
- nowrap:所有子元素在一行上展示,可能会导致压缩。
- wrap:子元素在必要时换行。
- wrap-reverse:子元素换行,排列顺序逆向。
|
定义Flex项目是否应该换行及其换行方式。 |
flex-flow |
是flex-direction 和flex-wrap 的简写属性。 |
同时设置flex-direction 和flex-wrap 。 |
justify-content |
- flex-start:项目对齐到容器的起始位置。
- flex-end:项目对齐到容器的结束位置。
- center:项目在容器中居中显示。
- space-between:项目在容器中平均分布,首尾项目与容器边缘对齐。
- space-around:项目在容器中平均分布,周围留有相等的空间。
- space-evenly:项目在容器中均匀分布,包括与边缘的距离。
|
设置Flex项目在主轴上的对齐方式。 |
用于Flex项目的属性
属性 |
可用值及其说明 |
描述 |
order |
<整数>:定义项目在容器内的排列顺序。 |
控制项目的排列顺序,数值越小排在前面。 |
flex-grow |
<数字>:定义项目的放大比例。 |
定义项目在容器中的放大比例,用于决定如何分配额外空间。 |
flex-shrink |
<数字>:定义项目的缩小比例。 |
定义项目在容器中的缩小比例,用于决定在空间不足时如何缩小项目。 |
flex-basis |
<长度>|<百分比>|auto:设置项目的初始大小。 |
设置项目在进行剩余空间分配之前的初始大小。 |
flex |
是flex-grow ,flex-shrink 和flex-basis 的简写。 |
设置项目的伸缩参数。 |
align-self |
- auto:继承容器的align-items属性。
- flex-start:项目对齐到交叉轴的起始位置。
- flex-end:项目对齐到交叉轴的结束位置。
- center:项目在交叉轴上居中显示。
- baseline:项目基于文本基线对齐。
- stretch:项目被拉伸以占满整个交叉轴。
|
允许单个项目有不同于容器的align-items值的对齐方式。 |