Flexbox布局中的伸缩对齐：align-items与align-self的结合应用

# 1. 简介

Flexbox是一种用于网页布局的弹性盒子模型，它可以使我们更轻松、灵活地进行网页布局。在传统的布局方式中，我们通常使用浮动、定位等属性来控制元素的位置和排列，但这些方法存在一些局限性。而Flexbox布局则提供了更加强大和直观的布局功能。

## 1. 介绍Flexbox布局的基本概念

Flexbox布局主要由两个重要概念组成：弹性容器和弹性项目。弹性容器是指应用Flexbox布局的父级容器，而弹性项目即为容器中的子元素。通过对弹性容器和弹性项目的设置，我们可以实现不同的布局效果。

## 2. 弹性容器与弹性项目的概念

在Flexbox布局中，弹性容器是指应用Flexbox布局的父级容器。我们可以通过设置弹性容器的属性来控制其内部弹性项目的排列方式和对齐方式。常用的弹性容器属性包括`display`、`flex-direction`、`flex-wrap`等。

弹性项目则是指弹性容器中的子元素。通过设置弹性项目的属性，我们可以控制各个项目在弹性容器内的位置、大小和排列顺序等。常用的弹性项目属性包括`flex-grow`、`flex-shrink`、`flex-basis`等。

## 3. 伸缩对齐的重要性及作用

伸缩对齐是Flexbox布局中非常重要的概念之一，它能够帮助我们更好地控制弹性项目在弹性容器内的对齐方式。通过设置伸缩对齐属性，我们可以设置弹性项目的水平对齐和垂直对齐方式，从而实现各种不同的布局效果。

在接下来的章节中，我们将详细介绍Flexbox布局中的`align-items`属性以及`align-self`属性，并通过实例演示它们的使用方法和效果。

# 2. align-items属性详解

### 2.1 align-items属性的语法和取值

在Flexbox布局中，`align-items`属性用于控制弹性容器中所有弹性项目在交叉轴上的对齐方式。它可以使用以下取值：

- `stretch`：默认值，弹性项目将会拉伸以适应弹性容器的交叉轴尺寸。
- `flex-start`：弹性项目在交叉轴的起始位置对齐。
- `flex-end`：弹性项目在交叉轴的结束位置对齐。
- `center`：弹性项目在交叉轴上居中对齐。
- `baseline`：弹性项目基线对齐。

该属性可以直接在弹性容器上设置，例如：

.container {
  align-items: flex-start;
}

这将使所有的弹性项目在交叉轴上对齐到弹性容器的起始位置。

### 2.2 在不同情况下align-items的表现

`align-items`属性在不同情况下的表现是不同的。下面是一些常见的情况：

#### 2.2.1 弹性容器高度大于所有弹性项目高度之和

当弹性容器的高度大于所有弹性项目的高度之和时，`align-items`属性将决定弹性项目在交叉轴上的对齐方式。

例如，给定以下HTML结构和CSS样式：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  align-items: center;
  height: 300px;
}

.item {
  height: 100px;
  background-color: lightblue;
}

这将使弹性容器的高度为300px，而每个弹性项目的高度为100px。由于弹性容器的高度大于所有弹性项目的高度之和，`align-items: center`将使所有的弹性项目在交叉轴上居中对齐。

#### 2.2.2 弹性容器高度小于某个弹性项目的高度

当弹性容器的高度小于某个弹性项目的高度时，`align-items`属性同样会影响弹性项目在交叉轴上的对齐方式。

例如，给定以下HTML结构和CSS样式：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  align-items: flex-start;
  height: 200px;
}

.item {
  height: 300px;
  background-color: lightblue;
}

这将使弹性容器的高度为200px，而每个弹性项目的高度为300px。由于弹性容器的高度小于某个弹性项目的高度，`align-items: flex-start`将使所有的弹性项目在交叉轴上顶部对齐。

### 2.3 align-items属性的实际应用场景

`align-items`属性在实际应用中非常有用，特别是在处理不同尺寸的弹性项目时。一些常见的应用场景包括：

- 垂直居中对齐：使用`align-items: center`可以实现弹性项目在垂直方向上的居中对齐。
- 顶部或底部对齐：使用`align-items: flex-start`或`align-items: flex-end`可以将弹性项