弹性填充空间 - CSS

弹性布局（Flexbox）是CSS3中新增的一种布局方式，旨在更好地对齐和分配空间。Flexbox 可以让元素像盒子一样排列，并让它们自动适应可用空间，使得网格和响应式设计更加容易。

弹性容器（Flex Container）

在Flex布局中，容器是指元素的外层容器，用来包裹需要布局的子元素，也被称为Flex容器（Flex Container）。可以使用以下样式将元素转换为弹性容器：

.container {
  display: flex;
}

这将使 .container 容器成为一个块级弹性容器。可以使用 inline-flex 来使容器成为一个内联弹性容器。

弹性子元素（Flex Item）

Flex子元素是Flex容器内被布局的元素，它们是Flex容器的子元素，也被称为Flex项（Flex Item）。要将元素转换为弹性子元素，请在容器中将元素声明为其孩子：

.container {
  display: flex;
}

.flex-item {
  flex: 1;
}

子元素的样式在弹性布局中非常重要，因为它们定义了子元素的尺寸和位置。这里使用了 Flex 属性将 flex-item 元素的尺寸平均分配。

Flex属性

弹性容器的主要属性是 justify-content 和 align-items，它们负责确定弹性子元素在主轴和副轴上的对齐方式，但有时您需要对单个子元素进行定制，这就是 flex 属性的用处。

flex 属性包括三个值，分别是 flex-grow、flex-shrink 和 flex-basis，它们可以分别被用于设置一个弹性子元素的伸缩性、收缩性和基础尺寸。

.flex-item {
  flex: 1 0 auto;
}

上述代码中，

• flex-grow：设置为 1，表示子项在空间分配方面具有相同的优先级和支配权。
• flex-shrink：设置为 0，表示不会缩小，因为将元素的 flex-shrink 设为 1 会使所有子项目都变成等-size。
• flex-basis：设置为 auto，表示元素在没有任何样式的情况下的原始样式。

要更改弹性子元素的样式，只需更改 flex 属性值。

弹性垂直居中

在传统的布局中，垂直居中布局是一项挑战，但是在弹性布局中，只需一个属性就可轻松垂直对齐。

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

以上代码使所有的弹性元素垂直居中。

弹性flex-wrap

在弹性布局中，可以使用 flex-wrap 属性来控制弹性项不适用空间的方式。默认情况下，flex-wrap 的值是 nowrap，这意味着所有弹性项都将放在一行上，并强制缩小，直到适合一行。如果容器没有足够的空间，它们将溢出。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 150px;
}

.flex-item {
  flex: 1 1 100px;
}

上述代码中，将容器的 flex-wrap 设置为 wrap，当弹性项目无法适合时自动换行。将ism的高度设置为 150px，每个弹性项目的宽度为 100px，并通过 flex 属性向容器分配额外的空间。

结论

Flexbox 弹性布局在 web 开发中变得越来越受欢迎。它提供了一种更灵活的方式进行布局，并减少了很多传统布局所需要的元素和样式表。愿您以这个简单的介绍开始用它熟练使用！