Flexbox 布局特性讲解-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 是一种弹性盒子布局模型，它使得我们可以更轻松地控制 HTML 元素的大小、位置和顺序。使用 Flexbox 布局还可以避免一些传统布局方式无法实现的问题。在本文中，我们将会讲解 Flexbox 布局的一些核心特性。

Flex 容器与 Flex 项

在使用 Flexbox 布局时，我们需要将需要布局的元素的父元素设为 Flex 容器，并且在其上添加 display: flex 属性：

.parent {
  display: flex;
}

有了 Flex 容器之后，里面所有的元素都会根据 Flexbox 的规则进行排列。Flex 容器里的每个元素被称为 Flex 项，它们会按照一定的规则排列到容器中。

Flex 方向

Flexbox 布局提供了四个方向：

row：水平从左到右
row-reverse：水平从右到左
column：垂直从上到下
column-reverse：垂直从下到上

可以通过在 .parent 中添加 flex-direction 属性来实现这些布局方向：

.parent {
  display: flex;
  flex-direction: row;
}

Flex 主轴与侧轴

在 Flexbox 布局中，主要的排列方向被称为主轴，与主轴垂直的方向被称为侧轴。主轴由 flex-direction 属性决定，侧轴由主轴的方向来决定。

例如，若主轴方向为 row，则侧轴为 column。

Flex 项排列方式

在 Flexbox 布局中，有三种排列方式：flex-start，center 和 flex-end。

flex-start：从主轴的起始位置开始排列。
center：在主轴上居中排列。
flex-end：从主轴的末尾位置排列。

这些排列方式可以通过 justify-content 属性来决定：

.parent {
  display: flex;
  justify-content: flex-start;
}

Flex 项间间隔

我们可以使用 gap 或者 margin 属性来为 Flex 项添加间隔，两者的区别在于 margin 会在 Flex 项之外留下空白，而 gap 只会在 Flex 项之间添加空隙。

.parent {
  display: flex;
  gap: 20px;
  /* 或者 */
  /* margin: 10px; */
}

Flex 项对齐方式

在 Flexbox 布局中，有三种对齐方式：flex-start，center 和 flex-end。

flex-start：将元素沿侧轴的起始位置对齐。
center：在侧轴上居中排列。
flex-end：将元素沿侧轴的末尾位置对齐。

这些对齐方式可以通过 align-items 属性来决定：

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Flex 布局实例

下面是一些实际的布局示例。这些示例可以更好地帮助大家理解 Flexbox 布局的特点。

水平居中与垂直居中

<div class="container">
  <div class="item">
    My Flexbox Item
  </div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  background-color: #f0f0f0;
}

.item {
  width: 200px;
  height: 100px;
  background-color: #666;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

Flex 布局等距排列

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

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 100px;
  height: 50px;
  background-color: #666;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

Flex 布局列表

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

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: column;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 100%;
  height: 50px;
  background-color: #666;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

总结

Flexbox 布局提供了一种非常灵活的布局方式，大大简化了我们处理 HTML 元素的排列问题。希望本文能够帮助大家更好地理解和应用 Flexbox 布局。

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