flex布局说明-CSDN博客

本文链接：https://blog.csdn.net/2401_83708850/article/details/147461635

Flexbox（Flexible Box）布局模型，即弹性布局，是 CSS3 引入的一种新的布局模式，用于为盒状模型提供最大的灵活性，它能简便、完整、响应式地实现各种页面布局。下面从基本概念、核心属性和使用场景三方面详细介绍 Flex 布局。

基本概念

在开始使用 Flex 布局之前，需要了解一些基本概念。

Flex 容器（Flex Container）：将一个元素的 display 属性设置为 flex 或 inline-flex 后，该元素就成为了一个 Flex 容器。flex 使容器成为块级元素，inline-flex 则使其成为行内元素。
Flex 项目（Flex Item）：Flex 容器内的直接子元素就是 Flex 项目。每个子元素都会根据 Flex 布局规则进行排列。
主轴（Main Axis）和交叉轴（Cross Axis）：Flex 布局中有两根轴，主轴是元素排列的主要方向，交叉轴则垂直于主轴。默认情况下，主轴是水平方向，交叉轴是垂直方向。主轴的开始位置叫做 main-start，结束位置叫做 main-end；交叉轴的开始位置叫做 cross-start，结束位置叫做 cross-end。

核心属性

Flex 布局的属性分为容器属性和项目属性。

.container {
    display: flex; /* 块级 Flex 容器 */
    /* display: inline-flex; 行内 Flex 容器 */
}

flex-direction：定义主轴的方向，从而决定 Flex 项目的排列方向

.container {
    flex-direction: row; /* 默认值，主轴为水平方向，项目从左到右排列 */
    /* flex-direction: row-reverse; 主轴为水平方向，项目从右到左排列 */
    /* flex-direction: column; 主轴为垂直方向，项目从上到下排列 */
    /* flex-direction: column-reverse; 主轴为垂直方向，项目从下到上排列 */
}

flex-wrap：定义 Flex 项目是否换行。

.container {
    flex-wrap: nowrap; /* 默认值，项目不换行 */
    /* flex-wrap: wrap; 项目换行，第一行在上方 */
    /* flex-wrap: wrap-reverse; 项目换行，第一行在下方 */
}

justify-content：定义项目在主轴上的对齐方式。

.container {
    justify-content: flex-start; /* 默认值，项目从主轴开始位置对齐 */
    /* justify-content: flex-end; 项目从主轴结束位置对齐 */
    /* justify-content: center; 项目在主轴上居中对齐 */
    /* justify-content: space-between; 项目均匀分布，第一个项目在主轴开始位置，最后一个项目在主轴结束位置 */
    /* justify-content: space-around; 项目均匀分布，每个项目两侧的间隔相等 */
    /* justify-content: space-evenly; 项目均匀分布，所有间隔都相等 */
}

align-items 是 Flexbox 布局（弹性布局）中用于 Flex 容器的一个重要属性，它主要用于定义 Flex 项目在交叉轴上的对齐方式

基本概念

在 Flexbox 布局里，有主轴和交叉轴。主轴方向由 flex-direction 属性决定，默认是水平方向；交叉轴则垂直于主轴。align-items 属性就是用来控制 Flex 项目在交叉轴上如何对齐。

取值及效果

align-items 有以下几个常用取值：

1. `stretch`

效果：这是 align-items 的默认值。如果 Flex 项目在交叉轴方向上没有设置固定的尺寸（如高度，当主轴为水平方向时），项目会在交叉轴方向上拉伸以填充整个容器的交叉轴空间。
```
.container {
    display: flex;
    align-items: stretch;
    height: 200px;
    background-color: lightgray;
}
.item {
    width: 50px;
    background-color: blue;
    margin: 5px;
}
```
在这个例子中，如果 .item 没有设置高度，那么它们会在垂直方向（交叉轴）上拉伸，填满 .container 的高度。

2. `flex-start`

效果：Flex 项目会在交叉轴的起始位置对齐。当主轴为水平方向时，项目会靠容器顶部对齐；当主轴为垂直方向时，项目会靠容器左侧对齐。

3. `flex-end`

效果：Flex 项目会在交叉轴的结束位置对齐。当主轴为水平方向时，项目会靠容器底部对齐；当主轴为垂直方向时，项目会靠容器右侧对齐。

4. `center`

效果：Flex 项目会在交叉轴上居中对齐。当主轴为水平方向时，项目会在容器的垂直中心位置对齐；当主轴为垂直方向时，项目会在容器的水平中心位置对齐。

5. `baseline`

效果：Flex 项目会根据它们内部第一行文字的基线对齐。如果项目内没有文字，通常会按照项目的顶部对齐。

应用场景

垂直居中元素：当你需要将元素在垂直方向上居中时，使用 align-items: center 结合合适的 flex-direction 设置可以轻松实现。
创建等高列布局：使用 align-items: stretch 可以让 Flex 项目在交叉轴方向上拉伸，实现等高列的布局效果。