10. 深入弹性布局

弹性布局（Flexbox）是CSS3提供的一种强大的布局模式，它使得在各种屏幕尺寸和设备上创建灵活、响应式的布局变得更加简单。Flexbox布局模型主要解决了一维布局问题，即如何在一个轴上排列项目。本章将深入探讨弹性布局的高级特性，教您如何对齐和排序弹性项目，如何在弹性布局中实现响应式设计，并展示一些实际应用案例。

10.1 弹性项目的对齐与排序

弹性布局的核心在于其灵活的对齐和排序能力，以下是一些关键属性和示例。

父容器属性

1. justify-content：定义弹性项目在主轴（通常是水平轴）上的对齐方式。

   • 取值：flex-start、flex-end、center、space-between、space-around、space-evenly。

   • 示例：

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

2. align-items：定义弹性项目在交叉轴（通常是垂直轴）上的对齐方式。

   • 取值：flex-start、flex-end、center、baseline、stretch。

   • 示例：

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

3. align-content：定义多行弹性项目在交叉轴上的对齐方式，仅在多行布局时有效。

   • 取值：flex-start、flex-end、center、space-between、space-around、stretch。

   • 示例：

     .container {
         display: flex;
         flex-wrap: wrap; /* 允许换行 */
         align-content: space-between; /* 多行项目在交叉轴上均匀分布 */
     }
     

子项目属性

1. order：定义弹性项目的排列顺序，默认值为0。

   • 示例：

     .item {
         order: 1; /* 设置项目的排列顺序 */
     }
     

2. align-self：允许单个弹性项目在交叉轴上独立对齐，覆盖align-items属性。

   • 取值与align-items相同。

   • 示例：

     .item {
         align-self: flex-end; /* 单个项目在交叉轴上对齐到末尾 */
     }
     

示例

<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;
    justify-content: space-around; /* 项目在主轴上均匀分布 */
    align-items: stretch; /* 项目在交叉轴上拉伸对齐 */
}

.item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    margin: 5px;
    flex: 1; /* 项目均分可用空间 */
}

10.2 弹性布局中的响应式设计

弹性布局非常适合响应式设计，因为它可以根据可用空间动态调整项目的尺寸和排列。

媒体查询与Flexbox结合

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

.responsive-container {
    display: flex;
    flex-direction: column; /* 默认竖直排列 */
}

.responsive-item {
    background-color: #2ecc71;
    color: white;
    padding: 20px;
    margin: 5px;
}

/* 屏幕宽度大于600px时，水平排列 */
@media (min-width: 600px) {
    .responsive-container {
        flex-direction: row;
    }
}

在这个示例中，弹性容器在小屏幕上垂直排列，而在大屏幕上水平排列。

10.3 复杂布局的实现

弹性布局能够实现复杂的网页布局，包括嵌套布局和动态尺寸调整。

示例：嵌套弹性布局

<div class="outer-container">
    <div class="inner-container">
        <div class="inner-item">Inner Item 1</div>
        <div class="inner-item">Inner Item 2</div>
    </div>
    <div class="outer-item">Outer Item 1</div>
    <div class="outer-item">Outer Item 2</div>
</div>

.outer-container {
    display: flex;
    flex-direction: column; /* 外层容器竖直排列 */
}

.inner-container {
    display: flex;
    justify-content: space-between; /* 内层容器水平均匀分布 */
    background-color: #e74c3c;
}

.outer-item, .inner-item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    margin: 5px;
}

在这个示例中，外层容器竖直排列，而内层容器水平排列，实现了复杂的嵌套布局。

10.4 弹性布局的实际应用案例

通过一些实际应用案例，我们可以更好地理解如何在实际项目中运用弹性布局。

案例一：弹性导航栏

<nav class="flex-navbar">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item">Services</div>
    <div class="nav-item">Contact</div>
</nav>

.flex-navbar {
    display: flex;
    justify-content: space-between; /* 项目在主轴上均匀分布 */
    background-color: #333;
    padding: 10px;
}

.nav-item {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}

.nav-item:hover {
    background-color: #555;
}

案例二：弹性卡片布局

<div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
</div>

.card-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 10px;
}

.card {
    flex: 1 1 calc(25% - 10px); /* 动态调整尺寸 */
    background-color: #3498db;
    color: white;
    padding: 20px;
    box-sizing: border-box;
}

/* 屏幕宽度小于600px时，卡片宽度100% */
@media (max-width: 600px) {
    .card {
        flex: 1 1 100%;
    }
}

在这个示例中，卡片在大屏幕上均分四列，而在小屏幕上每行显示一张卡片。