“弹性盒子”一维布局系统（补充）——WEB开发系列31

标签：容器 WEB 31 项目 flex 弹性一维对齐 display

弹性盒子是一种一维布局方法，用于根据行或列排列元素。元素可以扩展以填补多余的空间，或者缩小以适应较小的空间，为容器中的子元素提供灵活的且一致的布局方式。

“弹性盒子”一维布局系统（补充）——WEB开发系列31_百度

一、什么是弹性盒子？

CSS 弹性盒子（Flexible Box Layout，简称 Flexbox）是 CSS3 中引入的一种布局模式，提供一种有效的方式来布局、对齐和分配容器内空间，特别是在动态和复杂的应用界面中。

1、弹性盒子的基本概念

弹性容器（Flex Container）：通过设置 display: flex 或 display: inline-flex 创建，成为弹性盒子的上下文。
弹性项目（Flex Items）：弹性容器中的直接子元素，它们的布局和行为会受到弹性容器的控制。

2、Flexbox 的优势

易于实现响应式布局：无论屏幕大小，Flexbox 都能轻松处理元素的排列和对齐。
空间分配的灵活性：能够方便地调整子元素大小和位置，以适应不同浏览器窗口或设备。
对齐和排序更直观：使用 Flexbox 可以简化项目的对齐方式及其在容器内的显示顺序。

我们先来看看一个简单的示例，包含多个子元素的弹性盒子。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 示例</title>
    <style>
        .container {
            display: flex;  /* 设置为弹性盒子 */
            border: 1px solid #ccc; /* 添加边框 */
            padding: 10px;
        }
        .item {
            background-color: #4CAF50;
            color: #fff;
            padding: 15px;
            margin: 5px; /* 为每个项添加间距 */
            flex: 1; /* 所有项均等分配空间 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目 1</div>
        <div class="item">项目 2</div>
        <div class="item">项目 3</div>
    </div>
</body>
</html>

“弹性盒子”一维布局系统（补充）——WEB开发系列31_前端_02

我们创建了一个弹性盒子容器 .container，并包含了三个子元素（弹性项目）。通过设置 display: flex，子项将自动适应容器的宽度。

二、指定元素的布局为 Flexible

要将元素的布局指定为弹性盒子，只需在 CSS 中为容器添加 display: flex。这告诉浏览器将该元素视为弹性容器。

.container {
    display: flex; /* 创建弹性容器 */
}

通过这种设置，容器内部的所有子元素都会自动成为弹性项目，并享有 Flexbox 提供的布局能力。

三、Flex 模型说明

Flexbox 的基本结构可以总结为两个部分：弹性容器和弹性项目。

弹性容器：容器是 Flexbox 布局的基础。它控制了如何排列其内部的弹性项目。
弹性项目：容器里面的元素。在大多数情况下，只有容器的直接子元素才是弹性项目。

当元素表现为 flex 框时，它们沿着两个轴来布局：

“弹性盒子”一维布局系统（补充）——WEB开发系列31_元素_03

主轴（main axis）是指沿着弹性盒子（flex item）放置方向延伸的轴，可以是页面上的横向行或纵向列。主轴的起点和终点分别称为主起点（main start）和主终点（main end）。

交叉轴（cross axis）则是与主轴垂直的方向，其起点和终点被称为交叉起点（cross start）和交叉终点（cross end）。

当父元素设置为 display: flex 时，它被称为弹性容器（flex container）。而在该容器中表现为弹性盒子的元素被称为弹性项（flex item）。

四、列还是行？

默认情况下，Flexbox 将项目在行的方向排列。然而，开发者可以使用 flex-direction 属性设置项目在容器中的排列方向，这个属性可以取以下值：

row（默认值）：项目在水平方向上从左到右排列。
row-reverse：项目在水平方向上从右到左排列。
column：项目在垂直方向上从上到下排列。
column-reverse：项目在垂直方向上从下到上排列。

示例：改变排列方向

.container {
    display: flex;
    flex-direction: column; /* 垂直排列 */
}

通过更改 flex-direction 属性，项目的排列方式从水平变为垂直。

五、换行

有时，弹性项目的总宽度可能会超过容器的宽度。在这种情况下，默认情况下，Flexbox 会缩小弹性项目以适应容器。为了允许换行，可以使用 flex-wrap 属性进行设置。

nowrap（默认值）：所有项目在单行中显示。
wrap：允许根据容器的宽度换行。
wrap-reverse：反向换行，最后一行显示在最上面。

示例：使用换行

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

此设置让弹性项目在容器宽度不足时自动换行。

六、flex-flow 缩写

flex-flow 是 flex-direction 和 flex-wrap 的缩写。可以同时设置方向以及换行行为。

示例：使用 flex-flow

.container {
    display: flex;
    flex-flow: row wrap; /* 水平排列并允许换行 */
}

通过这种方式，容器内的项目将水平排列并且在不足容纳时自动换行。

七、Flex 项的动态尺寸

CSS 弹性盒子允许用户动态地分配项目的空间。这个功能依靠 flex 属性，它是 flex-grow、flex-shrink 和 flex-basis 的缩写：

flex-grow：定义项目的放大比例，默认为 0，表示不放大。
flex-shrink：定义项目的缩小比例，默认为 1，也就是说，项目能够缩小以适应容器。
flex-basis：定义项目的初始大小，默认为 auto，项目的大小会基于内容。

示例：使用 flex 属性

.item-1 {
    flex: 2; /* 占 2 份空间 */
}
.item-2 {
    flex: 1; /* 占 1 份空间 */
}
.item-3 {
    flex: 1; /* 占 1 份空间 */
}

示例中，item-1 将占据比其他两个项目更多的空间。

八、flex：缩写与全写

使用 flex 属性的缩写格式，即可以同时设置 flex-grow、flex-shrink 和 flex-basis：

.item {
    flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

这种缩写方式让我们在 CSS 中显得更为简洁和清晰。

九、水平和垂直对齐

Flexbox 允许开发者轻松实现元素的对齐，包括水平和垂直对齐。

1、justify-content（水平对齐）

justify-content 属性控制项目在主轴上的对齐方式，常用值包括：

flex-start：项目从容器的起始位置对齐。
flex-end：项目从容器的结束位置对齐。
center：项目在主轴中心对齐。
space-between：项目之间的间距均等。
space-around：项目间距相等且与容器边缘的间距相等。

示例：使用 justify-content

.container {
    display: flex;
    justify-content: center; /* 项目居中对齐 */
}

2、align-items（垂直对齐）

align-items 属性控制项目在交叉轴上的对齐方式，常用值包括：

flex-start：项目在交叉轴上端对齐。
flex-end：项目在交叉轴下端对齐。
center：项目在交叉轴中心对齐。
baseline：项目基线对齐。
stretch：项目拉伸以填满容器的高度。

示例：使用 align-items

.container {
    display: flex;
    align-items: stretch; /* 项目占满容器的高度 */
}

通过这两个对齐属性，可以轻松地实现不同的布局需求。

十、Flex 项排序

Flexbox 允许我们对项目的显示顺序进行重新排列，通过 order 属性来实现。默认值为 0，值越小的项目显示顺序越靠前。

示例：使用 order 属性

.item-1 {
    order: 2; /* 移到第二 */
}
.item-2 {
    order: 1; /* 移到第一 */
}
.item-3 {
    order: 3; /* 保持在第三 */
}

在这段代码中，虽然 item-1 在 HTML 结构中是第一个，但由于设置了 order 属性，它将显示在第二。

十一、Flex 嵌套

在实际开发中，我们经常需要将一个弹性盒子嵌套在另一个弹性盒子内。这样可以实现复杂的布局。

示例：弹性盒子嵌套

<div class="outer-container">
    <div class="inner-container">
        <div class="item">内层项目 1</div>
        <div class="item">内层项目 2</div>
    </div>
    <div class="item">外层项目 1</div>
</div>

.outer-container {
    display: flex; /* 外层弹性容器 */
}

.inner-container {
    display: flex; /* 内层弹性容器 */
    flex-direction: column; /* 垂直排列 */
}

通过在容器内嵌套另一个弹性容器，我们可以得到更复杂的布局。

十二、跨浏览器兼容性

Flexbox 在现代浏览器中得到了良好的支持，但在某些老旧浏览器（如 IE 10 和更早的版本）中可能会遇到问题。以下是一些提供跨浏览器兼容性的建议：

使用浏览器前缀：在开发需要兼容旧版浏览器的应用时，可以使用浏览器前缀（如 -ms-、-webkit-）来确保 Flexbox 特性正常工作。

利用 CSS 重置或前缀库：可以使用像 Autoprefixer 这样的工具自动添加所需的前缀。

为帮助读者巩固所学知识，以下是两个综合练习题。

题 1：

创建一个弹性容器，其中包含 5 个项，要求如下：

容器为水平排列，项之间的间距均等。
项的宽度动态变化，第一个项占两倍的宽度。

代码示例

<div class="flex-container">
    <div class="flex-item">项 1</div>
    <div class="flex-item">项 2</div>
    <div class="flex-item">项 3</div>
    <div class="flex-item">项 4</div>
    <div class="flex-item">项 5</div>
</div>

.flex-container {
    display: flex; /* 弹性盒子 */
    justify-content: space-between; /* 项之间均等间距 */
}

.flex-item {
    background: #4CAF50;
    color: white;
    padding: 15px;
    flex: 1; /* 默认宽度相同 */
}

.flex-item:nth-child(1) {
    flex: 2; /* 第一个项宽度为两倍 */
}

题 2：

创建一个嵌套的弹性盒子布局，其中外层容器水平排列，内层容器垂直排列，内外层项目均需居中对齐。