Flexbox 布局：掌握最强的布局方式

介绍

Flexbox 是一种 CSS 布局方式，它能够快速构建各种布局，让开发者们更轻松的创建复杂的页面。

传统的 CSS 布局方式，比如使用 display: inline-block 或者浮动，都有较大的局限性，并且很难实现垂直居中、自适应等效果。而 Flexbox 可以解决这些难题，它是一种基于弹性盒子模型的布局方式，可以轻松实现复杂的布局。

Flexbox 布局的基本概念

实现 Flexbox 布局，需要理解三个基本概念：

1. Flex Container

Flex Container，也就是弹性容器，是指一个容器，里面包含了需要进行布局的元素，这些元素称为 Flex Item。使用 Flexbox 布局的第一步，就是要将需要进行布局的元素包含在一个弹性容器中，这样这些元素就可以基于 Flex Container 进行布局了。

2. Flex Item

Flex Item，也就是弹性子元素，是指 Flex Container 中的元素，也就是需要布局的元素。Flex Item 中有几个比较重要的属性，包括：

• flex-grow：用于控制 Flex Item 的放大比例，用于实现自适应效果；
• flex-shrink：用于控制 Flex Item 的缩小比例，如果空间不足，Flex Item 会按照 flex-shrink 的值进行缩小；
• flex-basis：用于设置 Flex Item 的基准大小。

3. 主轴和交叉轴

Flex Container 中有两个重要的方向，一个是主轴，一个是交叉轴。主轴就是 Flex Container 的布局方向，可以是水平方向或者垂直方向。默认情况下，主轴是水平方向，即 flex-direction: row。交叉轴则是与主轴垂直的方向。

Flexbox 的基本用法

1. 弹性容器

首先，我们需要创建一个弹性容器，使用 display: flex 就可以将一个容器指定为弹性容器：

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

.flex-container {
  display: flex;
}

这样，我们就可以将这些子元素放到弹性容器中，自动按照 Flexbox 布局进行排列。

2. 主轴方向

默认情况下，弹性容器的主轴方向是水平的，可以通过设置 flex-direction: column 来将主轴方向变为垂直方向。

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

这样，我们就可以将子元素按照列排列，而不是按照行排列。

3. 主轴对齐方式

弹性容器可以通过 justify-content 属性来设置主轴的对齐方式，包括：

• flex-start：左对齐（默认值）
• flex-end：右对齐
• center：居中对齐
• space-between：两端对齐，项目之间的间隔相等
• space-around：每个项目两侧的间隔相等

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

这样，弹性容器中的子元素就可以居中对齐了。

4. 子元素对齐方式

子元素可以通过 align-items 属性来设置其在交叉轴上的对齐方式，包括：

• stretch：默认值，高度占满弹性容器
• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中间点对齐
• baseline：基线对齐

.flex-container {
  display: flex;
  justify-content: center; /* 在主轴上居中对齐 */
  height: 400px;
  align-items: center; /* 在交叉轴上居中对齐 */
}

这样，子元素就可以在弹性容器中垂直居中对齐了。

5. 放大和缩小

Flexbox 布局可以通过 flex-grow 和 flex-shrink 这两个属性来控制子元素的放大和缩小。默认情况下 flex-grow：0、flex-shrink: 1。也就是说，子元素不会放大，但会缩小，当它们遇到空间不足的情况时。

.flex-item {
  flex-grow: 1;
  flex-shrink: 0;
}

我们可以设置 flex-grow: 1，来让子元素在存在多余空间的情况下自动放大。

6. 排序

Flexbox 布局可以通过 order 属性来设置子元素的排序，也就是说，我们可以通过它来调整子元素的排列顺序。

.flex-item-2 {
  order: 1;
}

这样，我们就能将第二个子元素调整到第一个子元素的位置。

总结

Flexbox 布局是一种强大而灵活的布局方式，在实际开发中可以解决很多繁琐的布局问题。通过使用 Flexbox 布局，我们可以更加轻松的实现自适应、垂直居中等效果。

以上是 Flexbox 布局的基本概念和使用方法，希望对大家有所帮助。

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