弹性基础 - CSS

CSS中的弹性盒子（Flexbox）是一种用于创建可灵活布局的强大工具。它可以简化布局的复杂性，更有效地利用空间，并减少我们需要编写的CSS代码量。

弹性基础

弹性盒子由一个容器和其内部的项目组成。容器指的是包含所有项目的父元素，而项目则是容器内部的子元素。

在弹性盒子中，容器具有一些非常有用的属性。这些属性会影响项目的布局和排列方式，包括：

• display: flex：将一个元素变成一个弹性容器；
• flex-direction：项目的排列方向（主轴方向）；
• justify-content：在主轴上对齐方式；
• align-items：在侧轴上对齐方式（项目高度为空的情况）；
• align-content：在侧轴上对齐方式（项目高度大于一个 flex 行）。

下面是一个非常基本的弹性容器示例：

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

.container {
  display: flex;
}

• .container 类是需要添加 display: flex 的弹性容器，其默认排列方向为水平方向。
• .item 类是弹性容器内的项目，每个项目默认会平均分配空间。

伸缩项目

在弹性盒子中，伸缩项目（flex items）是指那些被包含在容器内部的元素。这些项目具有自己的一组布局属性，用来控制它们在容器中的分布情况。

下面列出了一些常用的项目属性：

• flex-grow：定义项目的放大比例；
• flex-shrink：定义项目的缩小比例；
• flex-basis：定义项目自身的尺寸。

可以通过在项目上使用这些属性来调整它们在弹性容器内的大小和位置。

.item {
  flex: 1 1 auto;
}

在上面的例子中，flex: 1 1 auto 表示项目的默认值。这意味着它可以放大和缩小，初始尺寸为项目内容大小。

主轴和侧轴

在弹性盒子中，有两条重要的轴线：主轴和侧轴。在默认情况下，主轴是从左到右的水平方向，侧轴则是从顶部到底部的垂直方向。

可以通过使用 flex-direction 属性来更改主轴方向。例如，如果我们将其设置为 column，那么主轴方向将变成从上到下的垂直方向。

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

对齐方式

在弹性盒子中，我们可以通过 justify-content 和 align-items 属性来设置项目在弹性容器内的对齐方式。

• justify-content：可以设置在主轴方向上的对齐方式。合法值包括 flex-start、flex-end、center、space-between、space-around。
• align-items：可以设置在侧轴方向上的对齐方式。合法值包括 flex-start、flex-end、center、baseline、stretch。

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

在这个例子中，所有的项目都将在容器的中心对齐。

多行对齐

如果弹性容器中的项目分为多行，那么我们可以使用 align-content 属性来控制这些行的对齐方式。

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

在这个例子中，所有的项目都将被分为多行，并在行与行之间进行均等分布，同时将第一行和最后一行分别与容器的顶部和底部对齐。

结论

弹性基础中的CSS可以大量减少我们的CSS代码量，具有灵活的功能，在实际使用过程中非常方便。我们可以利用伸缩项目、主轴和侧轴以及对齐方式等属性来创建具有不同布局和结构的网页。当然，以上仅仅只是 CSS 弹性基础的冰山一角，我们在实际使用过程中还需深入了解，加强理解，进一步提升我们的实战能力。

参考资料

• CSS Flexbox