Flexbox 布局实用技巧及进阶应用-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 弹性盒子布局是一种先进的 Web 布局技术，它可以帮助前端开发者轻松实现自适应布局、等高布局、垂直居中、顺序布局等多种复杂布局需求，使页面更加美观、灵活、易于维护。本文将介绍 Flexbox 布局的实用技巧及进阶应用，希望能对前端开发者学习和运用 Flexbox 布局有所帮助。

Flexbox 布局基础

在使用 Flexbox 布局前，我们需要了解一些基本概念：

Flex Container（容器）：设置了 display:flex 或 display:inline-flex 属性的元素，即容器。
Flex Items（项目）：容器内的子元素，即项目。
Main Axis（主轴）：Flexbox 布局的主要方向，从左往右（默认）或从上往下。
Cross Axis（交叉轴）：主轴的垂直方向。

容器属性

设置容器属性可以控制 Flexbox 布局的主要方向、换行方式、子元素在主轴和交叉轴上的对齐方式等：

flex-direction：设置主轴方向。包括 row（默认值，从左往右）、row-reverse（从右往左）、column（从上往下）、column-reverse（从下往上）。
flex-wrap：设置是否换行。包括 nowrap（默认值，不换行）、wrap（换行）、wrap-reverse（逆向换行）。
justify-content：设置主轴上的对齐方式。包括 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）、space-around（每个项目周围的空白间距相等）。
align-items：设置交叉轴上的对齐方式。包括 flex-start（顶对齐）、flex-end（底对齐）、center（居中对齐）、baseline（基线对齐）、stretch（默认值，拉伸对齐，如果项目未设置高度或设为auto，将占满整个容器的高度）。
align-content：多行项目在交叉轴上的对齐方式。包括 flex-start（顶对齐）、flex-end（底对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）、space-around（每个项目周围的空白间距相等）、stretch（默认值，拉伸对齐，占满整个容器的高度）。

项目属性

设置项目属性可以控制项目在主轴和交叉轴上的尺寸、位置、排序方式等：

order：设置项目的排列顺序，值越小越靠前。默认值为0。
flex-grow：设置项目在剩余空间中的放大比例。默认值为0（不放大）。
flex-shrink：设置项目在空间不足时的缩小比例。默认值为1（可缩小）。
flex-basis：设置项目的基准尺寸。默认值为auto。
flex：缩写属性，分别设置 flex-grow、flex-shrink 和 flex-basis 的值。默认值为0 1 auto，即不放大、可缩小、基准尺寸为auto。
align-self：设置单个项目在交叉轴上的对齐方式，覆盖容器的 align-items 属性。包括 flex-start、flex-end、center、baseline、stretch（默认值）。

实用技巧

等高布局

Flexbox 布局可以轻松实现等高布局，即让一行或一列内所有项目高度相等。通过设置容器的 align-items 和子元素的 flex 属性即可实现，代码如下：

// www.javascriptcn.com code example
<style>
  .container {
    display: flex;
    align-items: stretch;
  }
  .item {
    flex: 1;
  }
</style>
<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

align-items: stretch 表示在交叉轴上拉伸各项目占满整个容器的高度；
flex: 1 表示各项目在主轴上等分空间，高度自适应容器的高度。

垂直居中

Flexbox 布局可以轻松实现垂直居中，即让一个元素在另一个元素中垂直居中。通过设置外层容器的 display 和 align-items 属性以及内层元素的 align-self 属性即可实现，代码如下：

// www.javascriptcn.com code example
<style>
  .wrapper {
    display: flex;
    align-items: center;
    height: 200px;
  }
  .item {
    align-self: center;
  }
</style>
<div class="wrapper">
  <div class="item">这里是文本内容</div>
</div>

display: flex 表示设置外层容器为 Flex Container；
align-items: center 表示在交叉轴上居中对齐各项目，即将内层元素中心与外层容器中心对齐；
align-self: center 表示设置内层元素在交叉轴上居中对齐，即将内层元素中心与外层容器中心对齐。

伸缩布局

Flexbox 布局可以轻松实现伸缩布局，即让多个元素在一定的空间下自适应排列。通过设置外层容器的 display 和 flex-wrap 属性以及内层元素的 flex 属性即可实现，代码如下：

// www.javascriptcn.com code example
<style>
  .wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    flex: 1;
  }
</style>
<div class="wrapper">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
  <div class="item">项目4</div>
  <!-- 添加更多项目 -->
</div>

display: flex 表示设置外层容器为 Flex Container；
flex-wrap: wrap 表示换行，即在容器的宽度不足以容纳所有元素时，将元素放在新一行或新一列；
flex: 1 表示各项目等分容器剩余的宽度，即自适应填满容器的宽度。

进阶应用

实现固定宽度比例

Flexbox 布局可以实现固定宽度比例的两个元素，即一个元素占据固定比例的宽度，另一个元素占据剩余的宽度。通过设置容器的 display 属性以及两个元素的 flex 属性和 flex-basis 属性即可实现，代码如下：

// www.javascriptcn.com code example
<style>
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item1 {
    flex: 2;
    flex-basis: 50%;
  }
  .item2 {
    flex: 1;
    flex-basis: 50%;
  }
</style>
<div class="container">
  <div class="item1">左</div>
  <div class="item2">右</div>
</div>

display: flex 表示设置容器为 Flex Container；
justify-content: space-between 表示在主轴上两侧对齐，中间留有空隙；
align-items: center 表示在交叉轴上居中对齐各项目；
flex 表示设置项目的伸缩比例，1 表示自适应宽度，2 表示占据双倍宽度；
flex-basis 表示设置项目的基准宽度，50% 表示占据一半宽度。

实现网格布局

Flexbox 布局可以实现简单的网格布局，即按照一定的行数和列数将多个元素等分排列。通过设置容器的 display 属性以及项目的 flex-basis 和 flex-grow 属性即可实现，代码如下：

// www.javascriptcn.com code example
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    flex-basis: calc(100% / 3 - 20px);
    margin: 10px;
  }
</style>
<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
  <div class="item">项目4</div>
  <div class="item">项目5</div>
  <div class="item">项目6</div>
</div>

display: flex 表示设置容器为 Flex Container；
flex-wrap: wrap 表示换行，即在容器的宽度不足以容纳所有元素时，将元素放在新一行或新一列；
flex-basis 表示设置项目的基准宽度，calc(100% / 3 - 20px) 表示等分三列，每个元素占据一行的三分之一宽度，减去 margin: 10px 的左右边距；
flex-grow 表示项目在剩余空间中的放大比例，默认值为0，即不放大。

结语

Flexbox 布局是一种强大的前端布局技术，可以实现多种复杂的布局需求，是前端开发者提高工作效率、提升工作质量的重要工具之一。通过学习和运用 Flexbox 布局的实用技巧和进阶应用，我们可以更好地掌握这种技术，提高自己的前端开发水平。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7897ea941bf7134d8079c

Flexbox 布局实用技巧及进阶应用