8. CSS弹性布局基础

第8章 弹性布局基础

CSS3引入了一个强大的布局模块------弹性布局（Flexbox），它提供了一种更加高效、直观的方式来排列和对齐元素，使复杂布局的实现变得更加简单。本章将详细介绍弹性布局的基本概念和属性，并通过具体示例帮助读者掌握如何使用弹性布局。

8.1 弹性布局简介

弹性布局（Flexbox）是一种一维布局模型，主要用于在一个方向上（水平或垂直）排列子元素。它能够让我们更轻松地创建各种复杂的布局，包括居中对齐、等宽列和灵活的项目排列。

特点

• 简化对齐和分布：无论容器内的元素有多少，弹性布局都能让它们均匀分布或对齐。
• 响应式设计：弹性布局能够根据容器的尺寸自动调整子元素的尺寸和排列方式，适合创建响应式设计。
• 灵活的项目尺寸：子元素可以按比例缩放或扩展，以填满容器的剩余空间。

8.2 弹性容器与弹性项目

弹性布局的核心概念是弹性容器（flex container）和弹性项目（flex item）。

• 弹性容器 ：设置了 display: flex; 或 display: inline-flex; 的元素。
• 弹性项目：弹性容器内的直接子元素。

示例

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

.flex-container {
    display: flex; /* 将容器设为弹性容器 */
}

.flex-item {
    padding: 10px;
    background-color: #f0f0f0;
    margin: 5px;
    border: 1px solid #ccc;
}

8.3 弹性布局的基本属性

弹性容器的属性

1. flex-direction：定义主轴的方向（弹性项目的排列方向）。

   • 取值：row（默认值），row-reverse，column，column-reverse

   • 示例：

     .flex-container {
         flex-direction: row; /* 水平排列，默认值 */
     }

2. flex-wrap：定义弹性项目是否换行。

   • 取值：nowrap（默认值），wrap，wrap-reverse

   • 示例：

     .flex-container {
         flex-wrap: wrap; /* 允许弹性项目换行 */
     }

3. justify-content：定义主轴上的对齐方式。

   • 取值：flex-start（默认值），flex-end，center，space-between，space-around，space-evenly

   • 示例：

     .flex-container {
         justify-content: space-between; /* 项目在主轴上均匀分布 */
     }

4. align-items：定义交叉轴上的对齐方式。

   • 取值：stretch（默认值），flex-start，flex-end，center，baseline

   • 示例：

     .flex-container {
         align-items: center; /* 项目在交叉轴上居中对齐 */
     }

5. align-content：定义多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。

   • 取值：stretch（默认值），flex-start，flex-end，center，space-between，space-around

   • 示例：

     .flex-container {
         align-content: space-around; /* 多根轴线均匀分布 */
     }

弹性项目的属性

1. order：定义项目的排列顺序，数值越小，排列越靠前。

   • 示例：

     .flex-item {
         order: 1; /* 默认值为0 */
     }

2. flex-grow：定义项目的放大比例。

   • 示例：

     .flex-item {
         flex-grow: 1; /* 项目将填满剩余空间 */
     }

3. flex-shrink：定义项目的缩小比例。

   • 示例：

     .flex-item {
         flex-shrink: 1; /* 项目可以缩小以适应容器 */
     }

4. flex-basis：定义在分配多余空间之前，项目的默认大小。

   • 示例：

     .flex-item {
         flex-basis: 100px; /* 项目的初始大小 */
     }

5. align-self：允许单个项目在交叉轴上对齐方式与其他项目不同。

   • 取值：auto（默认值），flex-start，flex-end，center，baseline，stretch

   • 示例：

     .flex-item {
         align-self: flex-end; /* 项目在交叉轴上对齐到底部 */
     }

8.4 简单弹性布局示例

以下示例展示了如何使用弹性布局属性创建一个简单的响应式布局。

示例1：水平排列项目

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

.flex-container {
    display: flex; /* 将容器设为弹性容器 */
    flex-direction: row; /* 项目水平排列 */
    justify-content: space-around; /* 项目在主轴上均匀分布 */
    align-items: center; /* 项目在交叉轴上居中对齐 */
    height: 200px; /* 容器高度 */
    border: 1px solid #ccc; /* 容器边框 */
}

.flex-item {
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin: 5px;
    flex-grow: 1; /* 项目将填满剩余空间 */
}

示例2：垂直排列项目

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

.flex-container-vertical {
    display: flex; /* 将容器设为弹性容器 */
    flex-direction: column; /* 项目垂直排列 */
    justify-content: center; /* 项目在主轴上居中对齐 */
    align-items: flex-start; /* 项目在交叉轴上靠左对齐 */
    height: 300px; /* 容器高度 */
    border: 1px solid #ccc; /* 容器边框 */
}

.flex-item {
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin: 5px;
    flex-grow: 1; /* 项目将填满剩余空间 */
}