布局# 

CSS 布局是网页设计的核心，它决定了元素如何在页面上排列和组织。本章将介绍几种常用的 CSS 布局方式，包括 Flex 布局、Grid 布局、定位布局和响应式布局。

文档流和元素类型# 

在开始学习具体的布局方式之前，我们需要了解一些基本的布局概念：

1. 文档流：元素按照其在 HTML 中的顺序，从上到下、从左到右排列的方式。
2. 块级元素：独占一行，可以设置宽高，如 <div>、<p> 等。
3. 行内元素：不独占一行，不能设置宽高，如 <span>、<a> 等。
4. 行内块元素：不独占一行，但可以设置宽高，如 <img>、<input> 等。

弹性布局（Flex）# 

Flex 布局是一种现代的布局方式，它可以让容器中的子元素更加灵活地排列和对齐。

基本概念# 

• 弹性容器：使用 display: flex 或 display: inline-flex 声明的父容器
• 弹性元素：弹性容器中的子元素
• 主轴：弹性元素排列的主要方向，默认为水平方向（从左到右）
• 侧轴：与主轴垂直的方向，默认为垂直方向（从上到下）

容器属性# 

1. flex-direction：设置主轴方向

   • row：水平方向（默认值）
   • row-reverse：水平方向（从右到左）
   • column：垂直方向（从上到下）
   • column-reverse：垂直方向（从下到上）

2. justify-content：设置主轴上的对齐方式

   • flex-start：从起点对齐（默认值）
   • flex-end：从终点对齐
   • center：居中对齐
   • space-between：两端对齐，元素之间间隔相等
   • space-around：每个元素两侧的间隔相等

3. align-items：设置侧轴上的对齐方式

   • flex-start：从起点对齐
   • flex-end：从终点对齐
   • center：居中对齐
   • baseline：基线对齐
   • stretch：拉伸对齐（默认值）

4. flex-wrap：设置是否换行

   • nowrap：不换行（默认值）
   • wrap：换行
   • wrap-reverse：换行并反转

元素属性# 

1. flex：设置元素的伸缩比例

   • flex-grow：放大比例
   • flex-shrink：缩小比例
   • flex-basis：初始大小

2. align-self：设置单个元素在侧轴上的对齐方式

   • auto：继承父元素的 align-items 值（默认值）
   • flex-start：从起点对齐
   • flex-end：从终点对齐
   • center：居中对齐
   • baseline：基线对齐
   • stretch：拉伸对齐

动手试试# 

让我们来创建一个简单的弹性布局，练习弹性布局的各个属性。下面的代码编辑器提供了一个基础的 Flex 布局示例，你可以尝试修改不同的属性来观察效果。

练习任务# 

尝试修改 CSS 中的以下属性，观察布局的变化：

1. flex-direction：尝试将 row 改为 column、row-reverse 或 column-reverse
2. justify-content：尝试将 flex-start 改为 flex-end、center、space-between 或 space-around
3. align-items：尝试将 center 改为 flex-start、flex-end 或 stretch
4. flex-wrap：尝试将 nowrap 改为 wrap 或 wrap-reverse

进阶练习# 

1. 尝试给不同的弹性元素添加 flex 属性，例如：

   .item:nth-child(1) { flex: 2; }
   .item:nth-child(2) { flex: 1; }

2. 尝试给特定的弹性元素添加 align-self 属性，例如：

   .item:nth-child(3) { align-self: flex-end; }