Flex 布局详细总结
Flex 布局(Flexible Box Layout)是一种用于在容器中分配空间和对齐内容的 CSS 布局模型。它使得在复杂的布局中,元素能够灵活地适应可用空间。
主要概念
容器与项目:
- 容器:通过
display: flex;
或display: inline-flex;
声明的元素。 - 项目:容器内部的直接子元素。
- 容器:通过
主轴与交叉轴:
- 主轴:默认方向为水平方向(
flex-direction: row;
)。 - 交叉轴:垂直于主轴的方向。
- 主轴:默认方向为水平方向(
容器属性
display
: 设置为flex
或inline-flex
。flex-direction
: 定义主轴方向(row
,row-reverse
,column
,column-reverse
)。flex-wrap
: 定义是否换行(nowrap
,wrap
,wrap-reverse
)。flex-flow
:flex-direction
和flex-wrap
的简写形式。justify-content
: 定义主轴上的对齐方式(flex-start
,flex-end
,center
,space-between
,space-around
,space-evenly
)。align-items
: 定义交叉轴上的对齐方式(flex-start
,flex-end
,center
,baseline
,stretch
)。align-content
: 定义多行的对齐方式(flex-start
,flex-end
,center
,space-between
,space-around
,stretch
)。gap
: 定义项目之间的间距。
项目属性
flex-grow
: 定义项目的放大比例,默认为 0。flex-shrink
: 定义项目的缩小比例,默认为 1。flex-basis
: 定义项目在主轴上的初始大小,默认值为auto
。flex
:flex-grow
,flex-shrink
和flex-basis
的简写形式。flex 语法规则
单值语法:值必须是以下之一:
- 一个
<flex-grow>
的有效值:此时简写会扩展为flex: <flex-grow> 1 0
。 - 一个
<flex-basis>
的有效值:此时简写会扩展为flex: 1 1 <flex-basis>
。 - 关键字 none 或者全局关键字之一。
双值语法
第一个值必须是一个
flex-grow
的有效值。第二个值必须是以下之一:
- 一个
flex-shrink
的有效值:此时简写会扩展为flex: <flex-grow> <flex-shrink> 0
。 - 一个
flex-basis
的有效值:此时简写会扩展为flex: <flex-grow> 1 <flex-basis>
。
三值语法:值必须按照以下顺序指定:
- 一个
flex-grow
的有效值。 - 一个
flex-shrink
的有效值。 - 一个
flex-basis
的有效值。
- 一个
align-self
: 定义单个项目在交叉轴上的对齐方式,覆盖align-items
的设置(auto
,flex-start
,flex-end
,center
,baseline
,stretch
)。
使用示例
css
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.item {
flex: 1 1 200px; /* flex-grow | flex-shrink | flex-basis */
padding: 10px;
}