CSS3伸缩布局

CSS3伸缩布局是一种基于盒模型的布局方式，通过flexbox和grid来实现页面布局的技术。它可以让容器的子元素能够预测的排列，对齐和分配空间。在传统的布局方式中，比如block布局和inline布局，我们需要使用大量的float和定位来实现复杂的布局，而伸缩布局则能够更加高效和方便地实现这些复杂的布局需求。

## 1.1 什么是CSS3伸缩布局

CSS3伸缩布局是一种新的布局方式，它可以让容器内的子元素能够按照一定规则自动排列和对齐，并且能够动态调整宽度和高度以适应不同的屏幕大小和设备。这种布局方式相比传统的盒模型布局更加灵活和高效。

## 1.2 CSS3伸缩布局的优势和特点

- 灵活性：伸缩布局可以自动调整子元素的布局，适应不同的屏幕大小和设备。
- 简洁性：相比传统的布局方式，伸缩布局的代码更加简洁明了。
- 响应式布局：伸缩布局非常适合用于响应式设计，可以轻松地实现不同屏幕尺寸下的布局效果。
- 排版控制：可以非常方便地进行灵活的排版控制，实现多种复杂布局。

## 使用CSS3伸缩布局

在CSS3中引入了强大的伸缩布局（Flexbox），可以轻松实现灵活的页面布局。使用伸缩布局可以方便地对元素进行排列和对齐，适用于各种不同的设备和屏幕尺寸。

### 2.1 设置伸缩容器

要使用伸缩布局，首先需要设置一个伸缩容器。通过设置容器的`display`属性为`flex`或`inline-flex`可以将其定义为伸缩容器。

.container {
  display: flex; /*将div容器设置为伸缩容器*/
}

在上面的示例中，`.container`就是一个伸缩容器。

### 2.2 定义伸缩项目

在伸缩容器中，可以定义一系列的伸缩项目，这些项目可以决定了容器中元素的排列方式、大小和对齐方式。

.item {
  flex: 1; /*将div元素定义为伸缩项目*/
}

在上述代码中，`.item`就是一个伸缩项目，通过设置`flex`属性控制元素的行为。

### 2.3 控制伸缩项目的显示与隐藏

通过设置伸缩项目的`display`属性，可以控制伸缩项目的显示与隐藏。

.item {
  display: none; /*将伸缩项目隐藏*/
}

在上述代码中，将`.item`的`display`属性设置为`none`，就可以将伸缩项目隐藏起来。

## 3. 伸缩容器属性详解

CSS3伸缩布局的核心是伸缩容器（flex container），通过设置伸缩容器的属性，我们可以控制伸缩项目（flex item）在容器中的布局和排列方式。在本章节中，我们将详细介绍伸缩容器的各个属性及其作用。

### 3.1 flex-direction属性

`flex-direction`属性用于指定伸缩项目的排列方向。它有以下几个可选值：

- `row`（默认值）：从左到右排列伸缩项目。
- `row-reverse`：从右到左排列伸缩项目。
- `column`：从上到下排列伸缩项目。
- `column-reverse`：从下到上排列伸缩项目。

例如，我们可以将伸缩容器的 `flex-direction` 属性设置为 `row-reverse`，使伸缩项目从右到左排列：

.container {
  flex-direction: row-reverse;
}

### 3.2 flex-wrap属性

`flex-wrap`属性用于指定伸缩项目的换行方式。它有以下几个可选值：

- `nowrap`（默认值）：伸缩项目不换行，将全部显示在一行内。
- `wrap`：当伸缩项目排满一行后，余下的伸缩项目换行显示。
- `wrap-reverse`：与`wrap`类似，但换行时的排列顺序颠倒。

举个例子，我们可以让伸缩项目在排满一行后自动换行：

.container {
  flex-wrap: wrap;
}

### 3.3 flex-flow属性

`flex-flow`属性是`flex-direction`和`flex-wrap`的简写形式，可以一起定义这两个属性的取值。其语法为：

flex-flow: <flex-direction> <flex-wrap>;

例如，我们可以将伸缩容器的排列方向设置为`column`，并让伸缩项目换行显示：

.container {
  flex-flow: column wrap;
}

### 3.4 justify-content属性

`justify-content`属性用于指定伸缩项目在主轴上的对齐方式。主轴是伸缩容器的排列方向所在的轴线。它有以下几个可选值：

- `flex-start`（默认值）：伸缩项目沿主轴起点对齐。
- `flex-end`：伸缩项目沿主轴终点对齐。
- `center`：伸缩项目沿主轴居中对齐。
-