CSS 弹性盒子（​​Flexbox​​）

CSS 弹性盒子（Flexbox）是一种一维的布局模型，用于在容器中对项目进行灵活的排列、对齐和分配空间。它特别适合用来设计那些需要动态调整子元素位置和大小的布局，比如导航栏、卡片布局、响应式页面等。

一、基本概念

Flexbox 布局包含两个主要部分：

1. 1. Flex 容器（Flex Container）

   • • 应用了 display: flex; 或 display: inline-flex; 的元素。

   • • 是所有 Flex 子项的直接父元素。

2. 2. Flex 项目（Flex Items）

   • • Flex 容器的直接子元素，它们会按照 Flexbox 的规则排列。

二、如何创建一个 Flex 容器

只需要给一个元素的 display 属性设置为 flex 或 inline-flex：

.container {
  display: flex; /* 块级弹性容器 */
  /* 或者 */
  display: inline-flex; /* 行内弹性容器 */
}

三、Flex 容器的主要属性

以下是常用的作用于 Flex 容器 的属性：

1. flex-direction

定义主轴方向，决定子元素如何排列。

.container {
  display: flex;
  flex-direction: row; /* 默认 */
}

2. justify-content

定义主轴上的对齐方式，即子元素在水平方向（默认主轴）如何分布。

.container {
  justify-content: center;
}

3. align-items

定义交叉轴上的对齐方式，即子元素在垂直方向（默认交叉轴）如何对齐。

.container {
  align-items: center;
}

4. flex-wrap

定义是否允许子元素换行。

.container {
  flex-wrap: wrap;
}

5. flex-flow （简写）

是 flex-direction 和 flex-wrap 的简写形式。

.container {
  flex-flow: row wrap; /* 方向为行，允许换行 */
}

6. align-content

当有多行（即换行存在时），定义多行在交叉轴上的对齐方式。

注意：只有在 flex-wrap: wrap（即换行）时才有效。

四、Flex 项目（子元素）的常用属性

这些属性是设置在Flex 子元素上的，用来控制单个项目的排列行为。

1. order

定义项目的排列顺序，数值小的排在前面，默认为 0。

.item {
  order: 1;
}

2. flex-grow

定义项目的放大比例，即如果存在剩余空间，该项目是否放大以及放大多少。

• • 默认是 0，表示不放大。

• • 如果所有项目的 flex-grow 都是 1，则它们将等分剩余空间。

• • 如果其中一个为 2，其他为 1，则它占据的空间是其他的两倍。

.item {
  flex-grow: 1;
}

3. flex-shrink

定义项目的缩小比例，默认是 1，即如果空间不足，该项目会缩小。

• • 0 表示不缩小。

• • 通常与 flex-grow 一起使用，简写见下方。

4. flex-basis

定义项目在分配多余空间之前的默认大小，可以设为宽度值，如 200px、auto 等。

.item {
  flex-basis: 100px;
}

5. flex（简写属性）

是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值是 0 1 auto。

.item {
  flex: 1;           /* flex-grow: 1, 其他为默认 */
  /* 或者 */
  flex: 1 0 200px;   /* grow:1, shrink:0, basis:200px */
}

6. align-self

允许单个项目覆盖容器的 align-items 设置，定义该元素自身在交叉轴上的对齐方式。

.item {
  align-self: flex-end;
}

五、简单示例

示例 1：水平居中 + 垂直居中（经典居中布局）

<div class="container">
  <div class="item">居中内容</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 300px;           /* 需要设定一个高度来观察垂直居中效果 */
  border: 1px solid #ccc;
}

.item {
  background: lightblue;
  padding: 20px;
}

示例 2：导航栏（水平排列，两端对齐）

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0f0f0;
  padding: 10px 20px;
}

.nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}

六、总结：什么时候用 Flexbox？

✅ 适合一维布局（一行或一列）
✅ 需要对齐、分布、排序灵活控制
✅ 常用于：导航栏、卡片布局、表单布局、居中布局、响应式栅格等

🚫 如果你要处理复杂的二维布局（行和列同时控制），可以考虑使用 CSS Grid。