弹性盒子布局（Flexbox）详细介绍

CSS3 的弹性盒子布局（Flexbox）是一个强大的布局模型，旨在帮助开发者更容易地创建复杂的布局。Flexbox 提供了一种有效的方法来排列、对齐和分配空间，即使在不同的屏幕尺寸和设备下。以下是对 Flexbox 的详细介绍，以及所有相关的样式示例。

基本概念

创建弹性容器

主要属性

1. 弹性容器的属性

2. 弹性项目的属性

示例代码

关键点总结

基本概念

弹性容器（Flex Container）：通过将 display 属性设置为 flex 或 inline-flex 创建的元素，成为弹性容器。这个容器的直接子元素称为弹性项目（Flex Items）。
弹性项目（Flex Item）：弹性容器里的直接子元素。它们会以弹性的方式排列、对齐和调整大小。

创建弹性容器

要创建弹性布局，首先需要将一个元素设为弹性容器：

.container {display: flex; /* 创建弹性容器 */
}

主要属性

1. 弹性容器的属性

flex-direction：定义主轴方向，影响弹性项目的排列方式。
- row（默认）：项目从左到右排列。
- row-reverse：项目从右到左排列。
- column：项目从上到下排列。
- column-reverse：项目从下到上排列。
```
.container {flex-direction: row; /* 或 column, row-reverse, column-reverse */
}
```
flex-wrap：控制弹性项目是否换行行。可能的值：
- nowrap（默认）：所有项目都在一行。
- wrap：必要时项目换行。
- wrap-reverse：项目从下向上换行。
```
.container {flex-wrap: wrap; /* 或 nowrap, wrap-reverse */
}
```

flex-flow：是 flex-direction 和 flex-wrap 的简写。

.container {flex-flow: row wrap; /* 设置方向和换行 */
}

justify-content：沿主轴对齐项目。可能的值：
- flex-start（默认）：项目从左侧开始对齐。
- flex-end：项目从右侧对齐。
- center：项目居中对齐。
- space-between：项目之间的空间相等，首尾项目贴边。
- space-around：项目之间的空间相等，但首尾项目留有一半的空间。
```
.container {justify-content: space-between; /* 或 flex-start, flex-end, center, space-around */
}
```
align-items：沿交叉轴对齐项目。可能的值：
- stretch（默认）：项目拉伸以填满容器。
- flex-start：项目顶部对齐。
- flex-end：项目底部对齐。
- center：项目居中对齐。
- baseline：项目基线对齐。
```
.container {align-items: center; /* 或 flex-start, flex-end, baseline */
}
```
align-content：当有多行时，定义行之间的空间。与 align-items 类似，但适用于多行。
```
.container {align-content: space-between; /* 或 flex-start, flex-end, center, space-around */
}
```

2. 弹性项目的属性

flex-grow：定义项目的放大比例，默认值为 0。
```
.item {flex-grow: 1; /* 项目会占据剩余空间 */
}
```
flex-shrink：定义项目的缩小比例，默认值为 1。
```
.item {flex-shrink: 1; /* 项目可以收缩 */
}
```
flex-basis：定义项目在分配空间前占据的主轴空间，可以设为固定值或 auto。
```
.item {flex-basis: 100px; /* 项目基础宽度 */
}
```
flex：是 flex-grow、flex-shrink 和 flex-basis 的简写，可以方便地统一设置。
```
.item {flex: 1; /* 等同于 flex: 1 1 0%; */
}
```
align-self：允许单个弹性项目的对齐方式覆盖align-items属性。
```
.item {align-self: flex-end; /* 覆盖行的对齐行为 */
}
```

示例代码

以下是一个完整的 Flexbox 布局示例，演示如何使用 Flexbox 进行布局：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;}.container {display: flex;flex-direction: row;        /* 主轴方向为水平 */flex-wrap: wrap;           /* 允许换行 */justify-content: space-around; /* 项目间隔相等 */align-items: center;       /* 交叉轴居中 */height: 300px;             /* 容器高度 */background-color: #eaeaea;}.item {flex: 1 1 150px;           /* 主轴扩展，基础宽度 150px，允许缩小 */margin: 10px;              /* 项目间距 */padding: 20px;             /* 项目内边距 */background-color: #007bff;color: white;text-align: center;border-radius: 5px;        /* 圆角 */}</style><title>Flexbox 示例</title>
</head>
<body><h2>弹性盒子布局示例</h2><div class="container"><div class="item">项目 1</div><div class="item">项目 2</div><div class="item">项目 3</div><div class="item">项目 4</div><div class="item">项目 5</div></div>
</body>
</html>