Flex布局
Flex理解
Flex 布局是一种强大的 CSS 布局模型，用于构建灵活的、响应式的布局结构。它提供了更加简洁、强大的方式来控制元素在容器中的排列、对齐和分布。
灵活的方向性布局
- Flex 布局通过定义主轴和交叉轴来决定元素的排列方向。主轴是 Flex 容器的主要方向，而交叉轴则垂直于主轴。
flex-direction： 控制 Flex 容器的主轴方向。justify-content和align-items： 分别用于控制子项在主轴和交叉轴上的对齐方式。
自适应、响应式布局
- 子项的尺寸可以根据可用空间自动调整，使得布局更具弹性。
flex属性： 可以指定子项的相对大小，使得它们在容器中按照比例分配空间。flex-wrap： 允许子项在容器内换行，实现多行布局。
对齐和间距控制
justify-content： 控制子项在主轴上的对齐方式，如居中、两端对齐等。align-items和align-self： 控制子项在交叉轴上的对齐方式。gap： 简化了在 Flex 容器中设置子项之间间距的方式。
适用于复杂布局
- 嵌套： 可以嵌套多个 Flex 容器，创建更复杂的布局结构。
- Flex 容器与 Flex 子项： 容器内的子项可以灵活地响应布局变化。
相关容器属性
flex布局的容器属性有如下6种：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-direction 属性为设置flex布局主轴的方向,即我们option的排列顺序
| 属性值 | 含义 |
|---|---|
| row | 默认值, 设置主轴为水平方向, 从左往右排列 |
| row-reverse | 设置主轴为水平方向, 从右往左排列 |
| column | 设置主轴为垂直方向, 从上往下排列 |
| column-reverse | 设置主轴为垂直方向, 从下往上排列 |
flex-warp
flex-warp 属性为设置一条轴线排不下option时，进行换行处理
| 属性值 | 含义 |
|---|---|
| nowrap | 默认值, 表示不换行 |
| wrap | 换行 |
| wrap-reverse | 换行, 在下方第一行 |
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.app{
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
justify-content 属性为设置option在主轴上的对齐方式
| 属性值 | 含义 |
|---|---|
| flex-start | 默认值，从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 从主轴居中对齐，如果主轴是x轴则水平居中 |
| space-between | 平分剩余空间(每个option的间距相同) |
| space-around | 平分剩余空间(若两边离边界的距离值为x，那么option的间距为2x) |
align-items
align-items 属性为设置option在单条轴线时在交叉轴上的对齐方式
| 属性值 | 含义 |
|---|---|
| stretch | 默认值 |
| baseline | 项目的第一行文字的基线对齐 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
align-content
align-items 属性为设置option在多条轴线时在交叉轴上的对齐方式
| 属性值 | 含义 |
|---|---|
| stretch | 默认值 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| space-between | 两端对齐,平分剩余空间(每个option的间距相同) |
| space-around | 平分剩余空间(若两边离边界的距离值为x，那么option的间距为2x) |
| space-evenly | 平分剩余空间(若两边离边界的距离值为x，那么option的间距也为x) |
容器属性的组合使用
原文链接：https://juejin.cn/post/7312658500144185344 作者：壹鸭壹呀
