一篇让你轻松上手 Flexbox 布局的教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 Flexbox 布局？

Flexbox 布局是 CSS3 中的一种新的布局模式，它可以让我们更加轻松地实现响应式布局。Flexbox 的全称是 Flexible Box，意为弹性盒子，它的主要思想是通过定义容器和容器内元素的属性来实现灵活的布局。

如何使用 Flexbox 布局？

容器属性

首先，我们需要将容器设置为弹性布局，可以使用 display: flex 或 display: inline-flex 来实现。display: flex 表示将容器设置为块级元素，而 display: inline-flex 则表示将容器设置为行内元素。

.container {
  display: flex;
}

接下来，我们可以通过以下属性来定义容器的布局：

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：定义交叉轴上的对齐方式，可以是 stretch（默认值，表示拉伸填满容器高度）、flex-start（表示顶部对齐）、flex-end（表示底部对齐）、center（表示居中对齐）或 baseline（表示基线对齐）。
align-content：定义多行元素之间的对齐方式，只有在容器内有多行元素时才有效，可以是 stretch（默认值，表示拉伸填满容器高度）、flex-start（表示顶部对齐）、flex-end（表示底部对齐）、center（表示居中对齐）、space-between（表示两端对齐，元素之间的间隔相等）或 space-around（表示元素之间的间隔相等，包括两端）。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

元素属性

接下来，我们需要为容器内的元素设置属性来实现弹性布局。

基本属性

flex-grow：定义元素的放大比例，默认值为 0，表示不放大，如果容器有多余的空间，元素会按比例分配。
flex-shrink：定义元素的缩小比例，默认值为 1，表示可以缩小，如果容器空间不足，元素会按比例缩小。
flex-basis：定义元素的基准宽度，可以是一个固定值或一个百分比值，如果没有设置，则会根据元素的内容自动计算。
flex：是 flex-grow、flex-shrink 和 flex-basis 的缩写，可以一次性设置这三个属性。
order：定义元素的排列顺序，数值越小越靠前，默认值为 0。

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
  flex: 1 1 100px;
  order: 1;
}

对齐属性

align-self：定义单个元素在交叉轴上的对齐方式，可以覆盖容器的 align-items 属性，可以是 auto（默认值，继承容器的 align-items 属性）、stretch（表示拉伸填满容器高度）、flex-start（表示顶部对齐）、flex-end（表示底部对齐）、center（表示居中对齐）或 baseline（表示基线对齐）。

.item {
  align-self: center;
}

Flexbox 布局的示例代码

下面是一个简单的示例代码，展示了 Flexbox 布局的基本用法：

<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>

// www.javascriptcn.com code example
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 500px;
  border: 1px solid #000;
}

.item {
  flex-basis: 100px;
  height: 100px;
  margin: 10px;
  background-color: #f00;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
}

通过上面的代码，我们可以看到容器内的元素被自动排列在一行，当容器宽度不足时，元素会自动换行。每个元素的宽度都是 100px，间距为 10px，元素会自动填充容器的剩余空间。

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

一篇让你轻松上手 Flexbox 布局的教程