Flexbox 布局完全指南-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对页面进行布局。传统的布局方式使用盒模型（Box Model）和浮动（Float）等技术，这些技术虽然已经被广泛使用并且成为了前端开发的基础，但是它们有时会带来一些问题，例如布局不灵活、代码复杂等。

Flexbox 布局是一种新的布局方式，它能够帮助我们更加灵活地布局页面，同时也可以减少代码的复杂度。本文将深入介绍 Flexbox 布局的知识点，帮助大家更好地掌握这种布局方式。

什么是 Flexbox 布局

Flexbox 布局（Flexible Box Layout）是一种基于盒模型的布局方式，它可以让我们更加灵活地布局页面中的元素。使用 Flexbox 布局，我们可以将容器中的子元素进行排列，并控制它们在容器中的位置、大小和间距等属性。Flexbox 布局可以应用于任何元素，而不仅仅是块级元素。

Flexbox 布局的核心是“弹性容器”（Flex Container）和“弹性项目”（Flex Item）。弹性容器是包含了弹性项目的元素，而弹性项目则是容器中的子元素。

Flexbox 布局的基本概念

在了解 Flexbox 布局的具体知识点之前，我们需要先了解一些基本概念。

弹性容器（Flex Container）

弹性容器是包含了弹性项目的元素。使用 display: flex; 或 display: inline-flex; 可以将一个元素设置为弹性容器。其中，display: flex; 表示将元素设置为块级弹性容器，而 display: inline-flex; 表示将元素设置为行内弹性容器。

// javascriptcn.com 代码示例
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<style>
.flex-container {
  display: flex;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin-right: 10px;
}
</style>

上面的代码将一个 div 元素设置为块级弹性容器，并在其中包含了三个子元素。在弹性容器中，子元素默认是水平排列的。

弹性项目（Flex Item）

弹性项目是容器中的子元素。使用 flex: <flex-grow> <flex-shrink> <flex-basis>; 可以设置弹性项目的弹性属性，其中 flex-grow 表示弹性项目的放大比例，flex-shrink 表示弹性项目的缩小比例，flex-basis 表示弹性项目的基本大小。

// javascriptcn.com 代码示例
<div class="flex-container">
  <div class="flex-item" style="flex: 1;">1</div>
  <div class="flex-item" style="flex: 2;">2</div>
  <div class="flex-item" style="flex: 3;">3</div>
</div>

<style>
.flex-container {
  display: flex;
}

.flex-item {
  height: 100px;
  margin-right: 10px;
  background-color: #f00;
}
</style>

上面的代码中，三个子元素的 flex 属性分别为 1、2、3，表示它们的放大比例为 1:2:3。在容器宽度不足以容纳所有子元素时，子元素会按照比例缩小，而在容器宽度足够时，子元素会按照比例放大。

弹性流（Flex Flow）

弹性流是弹性容器中的主轴和侧轴的方向。使用 flex-flow: <flex-direction> <flex-wrap>; 可以设置弹性流的方向和换行方式。其中，flex-direction 表示主轴的方向，可以取值为 row（水平方向）、column（垂直方向）、row-reverse（水平方向，从右到左排列）和 column-reverse（垂直方向，从下到上排列）；flex-wrap 表示换行方式，可以取值为 nowrap（不换行）、wrap（换行）和 wrap-reverse（换行，从下到上排列）。

// javascriptcn.com 代码示例
<div class="flex-container" style="flex-flow: row wrap;">
  <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 class="flex-item">6</div>
</div>

<style>
.flex-container {
  display: flex;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

上面的代码将弹性容器的弹性流设置为水平方向，并让子元素自动换行。在这个例子中，容器宽度不足以容纳所有子元素，因此子元素会自动换行排列。

弹性对齐（Flex Alignment）

弹性对齐是控制弹性容器中子元素对齐方式的属性。使用 justify-content 可以设置主轴方向上的对齐方式，可以取值为 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，中间间隔相等）、space-around（两端对齐，子元素间隔相等）和 space-evenly（子元素间隔相等）；使用 align-items 可以设置侧轴方向上的对齐方式，可以取值为 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐）和 stretch（拉伸对齐）；使用 align-content 可以设置侧轴方向上的对齐方式（只有在存在换行时才生效），可以取值为 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，中间间隔相等）、space-around（两端对齐，子元素间隔相等）和 stretch（拉伸对齐）。

// javascriptcn.com 代码示例
<div class="flex-container" style="justify-content: center; align-items: center;">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<style>
.flex-container {
  display: flex;
  height: 300px;
  background-color: #ccc;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin-right: 10px;
}
</style>

上面的代码将弹性容器的主轴和侧轴方向上的对齐方式都设置为居中对齐。在这个例子中，子元素会在容器中居中对齐。

Flexbox 布局的实际应用

Flexbox 布局的实际应用非常广泛，例如网站的导航栏、文章列表、图片展示等。下面是一些实际应用的示例代码。

网站导航栏

// javascriptcn.com 代码示例
<nav class="nav-container">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">首页</a></li>
    <li class="nav-item"><a href="#">分类</a></li>
    <li class="nav-item"><a href="#">标签</a></li>
    <li class="nav-item"><a href="#">关于</a></li>
  </ul>
</nav>

<style>
.nav-container {
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  list-style: none;
  padding: 0;
}

.nav-item {
  margin-right: 20px;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-item a {
  color: #333;
  text-decoration: none;
}
</style>

上面的代码展示了一个网站导航栏的布局。在这个布局中，我们使用了 display: flex; 将导航栏设置为弹性容器，并使用 justify-content: center; 将导航栏中的子元素居中对齐。

文章列表

// javascriptcn.com 代码示例
<div class="article-list">
  <div class="article-item">
    <a href="#">
      <img src="http://placehold.it/200x150" alt="">
      <h3>文章标题</h3>
      <p>文章摘要</p>
    </a>
  </div>
  <div class="article-item">
    <a href="#">
      <img src="http://placehold.it/200x150" alt="">
      <h3>文章标题</h3>
      <p>文章摘要</p>
    </a>
  </div>
  <div class="article-item">
    <a href="#">
      <img src="http://placehold.it/200x150" alt="">
      <h3>文章标题</h3>
      <p>文章摘要</p>
    </a>
  </div>
</div>

<style>
.article-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.article-item {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
}

.article-item a {
  display: block;
  color: #333;
  text-decoration: none;
}

.article-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.article-item h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

.article-item p {
  font-size: 14px;
  color: #666;
  margin-bottom: 0;
}
</style>

上面的代码展示了一个文章列表的布局。在这个布局中，我们使用了 display: flex; 将列表容器设置为弹性容器，并使用 flex-wrap: wrap; 让子元素自动换行。同时，我们还使用了 justify-content: space-between; 让子元素在容器中分布对齐。

图片展示

// javascriptcn.com 代码示例
<div class="image-list">
  <div class="image-item">
    <img src="http://placehold.it/400x300" alt="">
  </div>
  <div class="image-item">
    <img src="http://placehold.it/400x300" alt="">
  </div>
  <div class="image-item">
    <img src="http://placehold.it/400x300" alt="">
  </div>
  <div class="image-item">
    <img src="http://placehold.it/400x300" alt="">
  </div>
</div>

<style>
.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-item {
  width: calc(25% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
}

.image-item:last-child {
  margin-right: 0;
}

.image-item img {
  width: 100%;
  height: auto;
}
</style>

上面的代码展示了一个图片展示的布局。在这个布局中，我们使用了 display: flex; 将图片容器设置为弹性容器，并使用 flex-wrap: wrap; 让子元素自动换行。同时，我们还使用了 justify-content: center; 让子元素在容器中居中对齐。

总结

Flexbox 布局是一种非常灵活的布局方式，能够帮助我们更加方便地布局页面中的元素。本文介绍了 Flexbox 布局的基本概念和实际应用，希望能够帮助大家更好地掌握这种布局方式。

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