Flex 布局详解（一）

前言

在前端开发中，布局是一个非常基础的部分。针对不同的需求，我们需要使用不同的布局方式。而在现在的 Web 开发中， Flex 布局已经成为一种非常方便、易用的布局方式。本文将对 Flex 布局做一些详细的介绍，包括如何定义容器和项目的属性、常见的使用场景等。本文是系列文章的第一篇，主要介绍 Flex 布局的基础概念和语法。

Flex 布局概述

Flex 布局是 CSS3 新增的一种布局方式。通过对容器和项目的属性进行设置，我们可以非常方便地实现各种复杂的布局效果。相比传统的布局方式， Flex 布局具有以下优势：

• 可伸缩性：通过调整容器和项目的属性，我们可以实现弹性的布局效果，适应不同大小的设备和屏幕。
• 容器与项目的独立控制：我们可以通过容器和项目的属性来独立控制它们的行为，而不需要对其他元素进行影响。
• 简单易用的语法： Flex 布局的语法相对简单，容易学习和使用。

Flex 容器和项目

在 Flex 布局中，我们需要将元素分为容器和项目两类。容器是指直接包含项目的元素，而项目是指容器中直接放置的元素。下面是一个简单的 Flex 布局示意图：

   ┌─────┬─────┬─────┐ 
   │     │     │     │ 
   │     │     │     │ 
   │     │     │     │ 
   └─────┴─────┴─────┘ 
    容器中的项目

容器

在 Flex 布局中，我们可以使用 display: flex 属性来将一个元素定义为 Flex 容器。容器的所有子元素将成为项目，我们可以通过容器的属性来控制项目的布局方式。

以下是定义 Flex 容器的基本语法：

.container {
  display: flex;
}

设置 Flex 容器后，容器内的所有子元素均为 Flex 项目，且默认会进行水平排列。容器及其子元素拥有的常用属性如下所示：

• flex-direction： 定义项目的排列方式，包括以下四个属性值：
  • row：默认值，从左到右排列。
  • row-reverse：从右到左排列。
  • column：从上到下排列。
  • column-reverse：从下到上排列。
• flex-wrap： 定义项目是否换行，包括以下三个属性值：
  • nowrap：默认值，不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
• flex-flow： 定义 flex-direction 和 flex-wrap 的简写属性，语法：flex-flow: <flex-direction> <flex-wrap>。默认为 row nowrap。
• justify-content： 定义项目在主轴上的对齐方式，包括以下五个属性值：
  • flex-start：默认值，靠左对齐。
  • flex-end：靠右对齐。
  • center：居中对齐。
  • space-between：两端对齐，项目之间的间距相等。
  • space-around：每个项目两侧的间距相等，项目之间的间距也相等。
• align-items： 定义项目在交叉轴上的对齐方式，包括以下五个属性值：
  • stretch：默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：垂直居中对齐。
  • baseline：项目的基线对齐。
• align-content： 定义多根轴线的对齐方式，如果只有一根轴线时无效，包括以下六个属性值：
  • stretch：默认值，轴线占满整个交叉轴。
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每个轴线两侧的间隔平均分布，轴线之间间隔相等。

项目

在 Flex 布局中，我们可以使用 flex 属性来定义项目的属性。这个属性通过设置一个或多个值来对项目进行布局，其具体语法如下所示：

.item {
  flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
}

上面的语法中，none 表示项目不参与伸缩。<flex-grow> 表示项目的放大比例，它是一个数字，定义了项目在分配多余空间时的扩展比例，默认为 0。<flex-shrink> 表示项目的缩小比例，它是一个数字，定义了项目在空间不足时的收缩比例，默认为 1。<flex-basis> 表示项目在分配多余空间之前，项目占据的主轴空间，默认为 auto。Flex 布局中的项目还具有以下常用属性：

• order： 定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
• flex-grow： 定义项目的放大比例。
• flex-shrink： 定义项目的缩小比例。
• flex-basis： 定义项目在分配多余空间之前，项目占据的主轴空间。
• flex： 定义项目的三个属性 flex-grow、flex-shrink、flex-basis 的简写属性。
• align-self： 定义单个项目在交叉轴上的对齐方式，覆盖容器的 align-items 属性。取值和含义同 align-items。

示例代码

下面是一个基本的 Flex 布局代码示例：

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

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f5f5f5;
}

上面的示例代码中，我们创建了一个 Flex 容器，容器内有三个项目。通过设置容器的属性，我们将三个项目排成了一排，并在每个项目之间留出了间隔。每个项目的高度为 50px，文本水平和垂直居中，背景为灰色。

总结

本文主要围绕 Flex 布局展开，介绍了它的基本概念和语法，以及容器和项目的相关属性。通过灵活运用这些属性，我们可以轻松实现各种布局效果，提高了 Web 页面的开发效率。在下一篇文章中，我们将进一步探讨 Flex 布局的高级用法和实际应用场景，敬请期待！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654f85a97d4982a6eb8792db