#全球第六代荣放中国交付备受关注#

大家好，今天我们来聊聊前端开发中一个非常强大的布局工具——flex。如果你还在为元素的对齐、分布和尺寸调整而烦恼，那么flex布局很可能就是你要找的答案。

什么是flex布局？

flex布局，也叫弹性盒子布局，是CSS3中一种新的布局模式。它的设计目的是为了更高效地处理容器内项目的排列、对齐和空间分配，尤其是在一维空间（行或列）中。

在flex布局中，有两个核心概念：

• flex容器：设置了 display: flex 或 display: inline-flex 的元素。
• flex项目：flex容器内的每一个直接子元素。

注意：flex布局只影响其直接子元素，孙子元素不受影响。

如何开启flex布局？

开启flex布局非常简单，只需要在父元素（容器）的CSS中设置一个属性：

.container {  display: flex; /* 或者 display: inline-flex; */}

一旦设置了 display: flex，这个元素就变成了一个flex容器，它的所有直接子元素自动成为flex项目，并按照flex的规则进行排列。

容器的属性详解

flex容器的属性控制着所有项目的整体排列方式。我们来逐一看看。

1. flex-direction：决定主轴方向

这个属性决定了flex项目在容器内的排列方向，也就是主轴的方向。

它有四个值：

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

.container {  display: flex;  flex-direction: row; /* 水平从左到右 */}

2. flex-wrap：决定是否换行

默认情况下，flex项目会尝试挤在一行里。flex-wrap属性定义了当一行放不下所有项目时，是否换行。

它有三个值：

• nowrap（默认值）：不换行，项目可能会被压缩。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

.container {  display: flex;  flex-wrap: wrap; /* 空间不足时换行 */}

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

这个属性定义了项目在主轴上的对齐方式，也就是如何分配主轴上的剩余空间。

它有六个常用值：

• flex-start（默认值）：向主轴起点对齐。
• flex-end：向主轴终点对齐。
• center：居中对齐。
• space-between：两端对齐，项目之间的间隔相等。
• space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
• space-evenly：每个项目两侧的间隔完全相等。

.container {  display: flex;  justify-content: space-between; /* 项目均匀分布，两端无空隙 */}

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

这个属性定义了项目在交叉轴（与主轴垂直的轴）上的对齐方式。

它有五个常用值：

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
• flex-start：向交叉轴的起点对齐。
• flex-end：向交叉轴的终点对齐。
• center：在交叉轴居中对齐。
• baseline：项目的第一行文字的基线对齐。

.container {  display: flex;  align-items: center; /* 所有项目在垂直方向上居中对齐 */}

5. align-content：定义多根轴线的对齐方式

这个属性定义了当容器内有多行（多根轴线）时，这些轴线在交叉轴上的对齐方式。只有一根轴线时，该属性不起作用。

它的值和 justify-content 类似：

• stretch（默认值）：轴线占满整个交叉轴。
• flex-start：向交叉轴的起点对齐。
• flex-end：向交叉轴的终点对齐。
• center：在交叉轴居中对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍。
• space-evenly：每根轴线两侧的间隔完全相等。

项目的属性详解

说完了容器的属性，我们再来看看flex项目自身的属性。这些属性可以单独控制每个项目的表现。

1. order：定义项目的排列顺序

默认情况下，项目按照HTML代码的顺序排列。order属性可以改变这个顺序，数值越小，排列越靠前。默认值为0。

.item {  order: 1; /* 这个项目会排在 order 小于1的项目后面 */}

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

这个属性定义了当容器有剩余空间时，项目放大的比例。默认值为0，即不放大。

如果所有项目的flex-grow都为1，它们将等分剩余空间。如果一个项目的flex-grow为2，其他项目为1，则前者占据的剩余空间将比其他项目多一倍。

.item {  flex-grow: 1; /* 可以放大 */}

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

这个属性定义了当容器空间不足时，项目缩小的比例。默认值为1，即空间不足时，项目会缩小。

如果所有项目的flex-shrink都为1，当空间不足时，它们将等比例缩小。如果一个项目的flex-shrink为0，其他项目为1，则空间不足时，前者不缩小。

.item {  flex-shrink: 0; /* 空间不足时，这个项目不缩小 */}

4. flex-basis：定义项目在分配多余空间之前的初始大小

这个属性定义了项目在分配多余空间之前占据的主轴空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值是auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

.item {  flex-basis: 100px; /* 初始主轴尺寸为100像素 */}

5. flex：flex-grow, flex-shrink和 flex-basis的简写

flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

它有几个常用的快捷值：

• flex: initial：等同于 flex: 0 1 auto。（不放大，可缩小，初始大小为auto）
• flex: auto：等同于 flex: 1 1 auto。（可放大，可缩小，初始大小为auto）
• flex: none：等同于 flex: 0 0 auto。（不放大，不缩小，初始大小为auto）
• flex: 1：等同于 flex: 1 1 0%。（常用，项目会等分空间）

.item {  flex: 1; /* 这是一个非常常用的写法，让项目等分空间 */}

6. align-self：允许单个项目有与其他项目不一样的对齐方式

这个属性允许单个项目覆盖容器align-items属性的设置。默认值为auto，表示继承父容器的align-items属性。如果没有父容器，则等同于stretch。

它的可选值和align-items完全一样。

.item-special {  align-self: flex-end; /* 这个项目自己靠在交叉轴末端 */}

一个简单的实战例子

让我们通过一个常见的导航栏例子，把上面的知识用起来。

目标：创建一个水平导航栏，导航项均匀分布，并且垂直居中。

HTML结构：

<nav class="navbar">  <a href="#" class="nav-item">首页</a>  <a href="#" class="nav-item">产品</a>  <a href="#" class="nav-item">关于我们</a>  <a href="#" class="nav-item">联系我们</a></nav>

CSS样式：

.navbar {  display: flex; /* 开启flex布局 */  justify-content: space-around; /* 主轴（水平）上均匀分布，两边有间隔 */  align-items: center; /* 交叉轴（垂直）上居中对齐 */  height: 60px;  background-color: #333;}.nav-item {  color: white;  text-decoration: none;  padding: 10px 20px;}

这样，一个简单的、自适应的导航栏就完成了。无论屏幕宽度如何变化，导航项都会均匀分布并保持垂直居中。

浏览器兼容性

flex布局在现代浏览器中得到了很好的支持。对于需要兼容旧版浏览器（如IE10以下）的情况，可能需要使用传统的布局方式或添加浏览器前缀。

下表是主要属性的兼容性概览：

*注：IE11对flex布局的支持存在部分已知问题，使用时需注意。

写在最后

flex布局的学习曲线相对平缓，一旦掌握，你会发现很多以前很麻烦的布局问题都变得轻而易举。它特别适合用于组件、小规模布局以及一维内容的排列。

当然，flex布局主要解决一维布局问题。对于更复杂的二维布局（同时控制行和列），你可能还需要了解另一个强大的布局系统——Grid布局。但无论如何，flex都是你前端布局工具箱中必不可少的一件利器。

希望这篇文章能帮助你更好地理解和使用flex布局。多动手写写代码，尝试不同的属性组合，是掌握它的最好方法。