从零开始到进阶 Flexbox 布局-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，布局是非常重要的一环。而 Flexbox 布局可以帮助我们更加灵活地进行页面布局。本文将从零开始介绍 Flexbox 布局，包括基础概念、属性和示例代码，希望能够帮助读者掌握该技术并应用于实际开发中。

基础概念

Flexbox 布局是指使用 CSS3 中的 Flexible Box 模型来实现页面布局。其主要思想是将容器划分为一个或多个弹性容器，通过设置各个容器的属性来控制容器内部项目的排列方式、对齐方式、间距等。

Flexbox 布局包含两个主要概念：弹性容器和弹性项目。

弹性容器

弹性容器是一个包含弹性项目的父级容器，通过 display: flex 或 display: inline-flex 属性来定义。其中，flex 表示块级弹性容器，inline-flex 表示行内弹性容器。

弹性容器有以下属性：

flex-direction：定义弹性项目的排列方向。默认值为 row，表示水平方向；可选值包括 row-reverse（水平方向反向）、column（垂直方向）、column-reverse（垂直方向反向）。
flex-wrap：定义弹性项目是否换行。默认值为 nowrap，表示不换行；可选值包括 wrap（换行）、wrap-reverse（反向换行）。
flex-flow：flex-direction 和 flex-wrap 的缩写。
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（每个轴线两侧间隔相等）。

弹性项目

弹性项目是指放置在弹性容器内部的子元素。弹性项目有以下属性：

order：定义弹性项目的排列顺序。默认值为 0，表示按照文档流顺序排列；数值越小，排列越靠前。
flex-grow：定义弹性项目的放大比例。默认值为 0，表示不放大；数值越大，放大的比例越大。
flex-shrink：定义弹性项目的缩小比例。默认值为 1，表示可以缩小；数值越大，缩小的比例越大。
flex-basis：定义弹性项目的基准值。默认值为 auto，表示根据项目的内容自动计算；可以设置为固定值或百分比。
flex：flex-grow、flex-shrink 和 flex-basis 的缩写。
align-self：定义弹性项目在交叉轴上的对齐方式。默认值为 auto，表示继承父级容器的 align-items 属性；可选值包括 flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸对齐）。

属性详解

下面介绍 Flexbox 布局中常用的属性及其用法。

1. flex-direction

flex-direction 定义了弹性项目的排列方向。默认值为 row，表示水平方向。如果设置为 column，则弹性项目会按照垂直方向排列。

.container {
  display: flex;
  flex-direction: column; /* 垂直方向排列 */
}

如果设置为 row-reverse，则弹性项目会按照水平方向反向排列。如果设置为 column-reverse，则弹性项目会按照垂直方向反向排列。

2. justify-content

justify-content 定义了弹性项目在主轴上的对齐方式。默认值为 flex-start，表示左对齐。如果设置为 flex-end，则弹性项目会右对齐。如果设置为 center，则弹性项目会居中对齐。如果设置为 space-between，则弹性项目会两端对齐，项目间间隔相等。如果设置为 space-around，则每个项目两侧间隔相等。

.container {
  display: flex;
  justify-content: center; /* 居中对齐 */
}

3. align-items

align-items 定义了弹性项目在交叉轴上的对齐方式。默认值为 stretch，表示拉伸对齐。如果设置为 flex-start，则弹性项目会顶部对齐。如果设置为 flex-end，则弹性项目会底部对齐。如果设置为 center，则弹性项目会居中对齐。如果设置为 baseline，则弹性项目会基线对齐。

.container {
  display: flex;
  align-items: center; /* 居中对齐 */
}

4. flex-wrap

flex-wrap 定义了弹性项目是否换行。默认值为 nowrap，表示不换行。如果设置为 wrap，则弹性项目会换行。如果设置为 wrap-reverse，则弹性项目会反向换行。

.container {
  display: flex;
  flex-wrap: wrap; /* 换行 */
}

5. align-content

align-content 定义了多根轴线的对齐方式。默认值为 stretch，表示拉伸对齐。如果设置为 flex-start，则多根轴线会顶部对齐。如果设置为 flex-end，则多根轴线会底部对齐。如果设置为 center，则多根轴线会居中对齐。如果设置为 space-between，则多根轴线会两端对齐，轴线间间隔相等。如果设置为 space-around，则每个轴线两侧间隔相等。

.container {
  display: flex;
  align-content: center; /* 居中对齐 */
}

6. order

order 定义了弹性项目的排列顺序。默认值为 0，表示按照文档流顺序排列。可以设置为正整数或负整数，数值越小排列越靠前。

.item {
  order: 1; /* 排列顺序为第二个 */
}

7. flex-grow

flex-grow 定义了弹性项目的放大比例。默认值为 0，表示不放大。可以设置为正整数，数值越大放大的比例越大。

.item {
  flex-grow: 1; /* 放大比例为 1 */
}

8. flex-shrink

flex-shrink 定义了弹性项目的缩小比例。默认值为 1，表示可以缩小。可以设置为正整数，数值越大缩小的比例越大。

.item {
  flex-shrink: 1; /* 缩小比例为 1 */
}

9. flex-basis

flex-basis 定义了弹性项目的基准值。默认值为 auto，表示根据项目的内容自动计算。可以设置为固定值或百分比。

.item {
  flex-basis: 100px; /* 基准值为 100px */
}

10. flex

flex 是 flex-grow、flex-shrink 和 flex-basis 的缩写。可以通过 flex: 1 的方式设置弹性项目的属性。

.item {
  flex: 1; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

11. align-self

align-self 定义了弹性项目在交叉轴上的对齐方式。默认值为 auto，表示继承父级容器的 align-items 属性。可以设置为 flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸对齐）。

.item {
  align-self: center; /* 居中对齐 */
}

实例演示

下面通过实例演示 Flexbox 布局的用法。

1. 水平居中

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

.container {
  display: flex;
  justify-content: center;
}

2. 垂直居中

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

.container {
  display: flex;
  align-items: center;
}

3. 水平垂直居中

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

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

4. 两端对齐

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

.container {
  display: flex;
  justify-content: space-between;
}

5. 换行

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

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
}

6. 垂直排列

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

.container {
  display: flex;
  flex-direction: column;
}

总结

本文介绍了 Flexbox 布局的基础概念、属性和示例代码。通过学习本文，读者可以掌握该技术并应用于实际开发中。在实际开发中，Flexbox 布局可以帮助我们更加灵活地进行页面布局，提高页面的可读性和可维护性。

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