弹性盒子模型（Flexbox）详解

弹性盒子模型（Flexbox）是一种用于布局设计的 CSS3 模块，它可以让我们更加灵活地控制 HTML 元素的排列和尺寸。在传统的网页布局中，我们通常使用 float 或者 position 等方式来实现元素的布局，但是这些方式在某些情况下会出现一些问题，比如元素的对齐方式、自适应宽度等等。而弹性盒子模型则可以解决这些问题，使得我们的布局更加简单、直观、灵活。

弹性盒子模型的基本概念

在介绍弹性盒子模型的语法和属性之前，我们先来了解一下它的基本概念。

弹性盒子模型是由容器（container）和项目（item）两个概念组成的。

容器是一个包含了一组项目的父元素，我们可以通过设置容器的属性来控制项目的排列和尺寸。

项目是容器的直接子元素，它们是被包含在容器内的元素。我们可以通过设置项目的属性来控制它们的排列和尺寸。

在弹性盒子模型中，容器和项目都有一些重要的属性，它们可以分为两类：容器属性和项目属性。接下来我们分别来介绍它们。

容器属性

弹性盒子模型中的容器属性主要用来控制项目的排列和尺寸。下面是一些常用的容器属性：

display

这是弹性盒子模型最基本的属性，用来定义一个元素为弹性盒子容器。它的取值可以是 flex 或者 inline-flex，分别表示块级弹性盒子和行内弹性盒子。默认值是 flex。

.container {
  display: flex;
}

flex-direction

这个属性用来指定项目的排列方向，它有四个取值：row、row-reverse、column 和 column-reverse。

• row：默认值，表示从左到右排列（水平方向）。
• row-reverse：表示从右到左排列（水平方向）。
• column：表示从上到下排列（垂直方向）。
• column-reverse：表示从下到上排列（垂直方向）。

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

justify-content

这个属性用来控制项目在主轴上的对齐方式，它有五个取值：flex-start、flex-end、center、space-between 和 space-around。

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

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

align-items

这个属性用来控制项目在交叉轴上的对齐方式，它有五个取值：flex-start、flex-end、center、baseline 和 stretch。

• flex-start：表示顶部对齐。
• flex-end：表示底部对齐。
• center：表示居中对齐。
• baseline：表示基线对齐。
• stretch：默认值，表示拉伸对齐。

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

align-content

这个属性用来控制多行项目在交叉轴上的对齐方式，它有五个取值：flex-start、flex-end、center、space-between 和 space-around。

• flex-start：表示顶部对齐。
• flex-end：表示底部对齐。
• center：表示居中对齐。
• space-between：表示两端对齐，项目之间的间隔相等。
• space-around：表示每个项目两侧的间隔相等。

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

项目属性

弹性盒子模型中的项目属性主要用来控制项目的排列和尺寸。下面是一些常用的项目属性：

order

这个属性用来指定项目的排列顺序，它的取值是整数，表示项目的排列顺序。默认值是 0。

.item {
  order: 2;
}

flex-grow

这个属性用来指定项目在剩余空间中所占的比例，它的取值是一个非负整数。默认值是 0，表示不放大。

.item {
  flex-grow: 1;
}

flex-shrink

这个属性用来指定项目在空间不足时所占的比例，它的取值是一个非负整数。默认值是 1，表示可以缩小。

.item {
  flex-shrink: 0;
}

flex-basis

这个属性用来指定项目在分配多余空间之前的基准值，它的取值可以是一个长度值、auto 或者 content。默认值是 auto。

.item {
  flex-basis: 100px;
}

flex

这个属性是 flex-grow、flex-shrink 和 flex-basis 的缩写，它的取值分别对应这三个属性。默认值是 0 1 auto。

.item {
  flex: 1 0 100px;
}

align-self

这个属性用来控制单个项目在交叉轴上的对齐方式，它的取值和 align-items 相同。

.item {
  align-self: center;
}

示例代码

下面是一个简单的示例代码，展示了弹性盒子模型的基本用法：

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

-- -------------------- ---- -------
---------- -
  -------- -----
  --------------- ----
  ---------------- -------
  ------------ -------
-

----- -
  ----- - - -----
  ----------- -------
  ---------- -----
  ------------ -----
  ------ -----
  ----------------- -----
  -------- -----
  ------- -----
-

在这个示例中，我们创建了一个包含三个项目的容器，然后通过设置容器的属性来控制项目的排列和尺寸。具体来说，我们将容器设置为块级弹性盒子，将项目排列方向设置为水平方向，将项目在主轴上居中对齐，将项目在交叉轴上居中对齐。然后我们设置项目的属性，将它们的宽度自适应容器的宽度，设置文本居中对齐，设置背景颜色和边距等样式。

总结

弹性盒子模型是一种非常有用的布局方式，它可以让我们更加灵活地控制 HTML 元素的排列和尺寸。在实际开发中，我们可以根据具体的需求来选择使用弹性盒子模型或者其他的布局方式。但是无论我们使用哪种方式，都需要保证布局的可读性、可维护性和兼容性。

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