Flex布局
Flex布局是一种在CSS3中引入的布局模式，用于处理复杂的网页布局问题。它提供一种更加灵活、动态的方式来组织和对齐内容，尤其适用于单列和多列布局以及响应式设计。在Flex布局中，容器可以调整其子元素的宽度、高度以及顺序，以最佳方式填充可用空间，同时保持内容的可读性和可触达性。
Flex布局的核心概念包括以下几个方面：
1. **Flex容器（Flex Container）**：这是使用`display: flex`或`display: inline-flex`属性定义的父元素。容器内的子元素会成为Flex项（Flex Items），并受到Flex布局规则的约束。
2. **主轴（Main Axis）与交叉轴（Cross Axis）**：Flex容器有一个主轴，从起点（main start）到终点（main end），还有一个与其垂直的交叉轴。默认情况下，主轴为水平方向，而交叉轴为垂直方向。通过`flex-direction`属性可以改变它们的方向。
3. **Flex项（Flex Items）**：是Flex容器的直接子元素，它们在主轴上排列。`flex-wrap`属性决定是否允许换行以及换行的方向。
4. **Flex属性**：主要有以下几种：
- `flex-grow`：定义了Flex项如何按比例扩展，如果存在剩余空间。
- `flex-shrink`：定义了Flex项如何按比例缩小，当空间不足时。
- `flex-basis`：确定了在分配额外空间之前，Flex项的基本大小。
- `flex`：是`flex-grow`, `flex-shrink`和`flex-basis`的简写形式。
- `align-self`：允许单个Flex项独立设置其在交叉轴上的对齐方式，覆盖容器的`align-items`属性。
5. **Flex容器属性**：用于控制整个Flex布局的行为：
- `flex-direction`：定义主轴的方向（默认是`row`，可设置为`row-reverse`, `column-reverse`）。
- `flex-wrap`：控制是否允许Flex项换行（默认是`nowrap`，可设置为`wrap`或`wrap-reverse`）。
- `justify-content
文件大小：354KB
评论区