如何在 CSS 中设置内容对齐的默认值?

cssweb developmentfront end technology更新于 2025/2/8 2:20:17

CSS 是一种 Web 语言，主要用于设计和呈现网页。它为我们提供了许多有助于自定义的属性。其中一个属性是"align content property"。

align content property 用于在弹性框或网格元素之间或周围分配空间。此属性的初始值为"normal"。它具有离散动画，并且计算值始终等于指定值。

需要注意的是，它不是可继承的属性。该属性受到大多数浏览器的广泛支持。

可以为此属性提供的各种值如下所述 -

Start - 当您希望内容或项目从容器元素的开头开始打包时使用此属性。
End - 当您希望内容或项目从容器元素的结尾开始打包时使用此属性。
Center - 用于将子元素打包在对齐容器的中心。
Normal - 这是对齐内容属性的默认值。
Flex-start - 用于 Flexbox 类型的容器，并将沿起始边缘开始对齐项目。但是，如果我们在非 flexbox 容器上使用它们，这将被视为开始。
Flex-end − 与 flex-start 一样，它也用于 flexbox 类型的容器中，并将开始沿结束边缘对齐项目。但是，如果我们在非弹性盒容器上使用它们，则会将其视为结束。
Space-between − 使用此属性指定的项目将沿容器的横轴对齐，并与相邻元素具有相同的空间。
Space-around − 其工作原理类似于 space between，但第一个元素的左侧和最后一个元素的右侧的空间等于两个相邻元素之间空间的一半。
Space-evenly − 这意味着所有元素之间都有相同的空间，而 space evenly 则意味着从第一个元素的开头到最后一个元素的结尾只有一半的空间。
Stretch − 它会自动更改容器内已关联自动大小的项目的大小。

除此之外，此属性还有 safe 和 unsafe 两个值。它们与 alignment 关键字一起使用，并取决于容器的特性，例如溢出是否会导致数据丢失。我们根据这些条件来选择是否保持对齐。

示例

下面给出了 align content 属性 的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: #92a4b5;
      }
      #mainDiv {
         background-color: black;
         width: 100%;
         height: 300px;
         display: flex;
         flex-wrap: wrap;
         align-content: stretch;
      }
      #mainDiv div {
         width: 100%;
         height: 40px;
      }
   </style>
</head>
<body>
   <h1>The example of align-content Property</h1>
   <div id="mainDiv">
      <div style="background-color: coral"></div>
      <div style="background-color: lightblue"></div>
      <div style="background-color: pink"></div>
   </div>
</body>
</html>

设置默认值以对齐内容

术语"默认值"实际上可以称为属性的"初始值"。对齐项的默认值是"拉伸"。

因此，我们可以说"normal"有点像一个具有特定含义的特殊关键字，但会根据其使用的上下文而变化。因为我们无法在没有特定上下文的情况下定义"normal"的作用。

我们可以放心地使用"normal"作为默认值，因为它要么被视为无效并使用后备值，要么被视为有效并回退到正确的值。

示例

下面给出了一个将"align content"的默认值设置为"normal"的示例代码 -

<!DOCTYPE html>
<html>
<head>
   <style>
      .FlexBox {
         width: 40vw;
         height: 54vh;
         border: 5px solid blue;
         display: flex;
         flex-wrap: wrap;
         background-color: rgb(170, 210, 170);
         align-content: normal;
      }
      #BoxItem1,
      #BoxItem2,
      #BoxItem3,
      #BoxItem4 {
         box-sizing: border-box;
         min-height: 20%;
         width: 22%;
         border: 1.5px dashed red;
         margin: 0.5vw;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      #BoxItem1 {
         background-color: rgb(214, 198, 192);
      }
      #BoxItem2 {
         background-color: rgb(198, 198, 49);
      }
      #BoxItem3 {
         background-color: rgb(233, 115, 135);
      }
      #BoxItem4 {
         background-color: rgb(143, 196, 196);
      }
   </style>
</head>
<body>
   <div class="FlexBox">
      <div id="BoxItem1">1</div>
      <div id="BoxItem2">2</div>
      <div id="BoxItem3">3</div>
      <div id="BoxItem4">4</div>
   </div>
</body>

我们可以看到，容器中的所有项目都按照默认值 normal 进行对齐，也就是根据 Flexbox 容器的规范进行拉伸。