CSS 如何设置align content的默认值

CSS是一种用于网页的语言，主要用于设计和呈现网页。它提供了许多属性，用于帮助自定义过程。其中一个属性是“align content”。

align content属性用于在flexbox或网格中分布空间，无论是在项目之间还是周围。该属性的初始值是“normal”。它具有离散的动画效果，计算值始终等于指定值。

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

该属性可以提供以下各种值：

Start - 在内容或项目从容器元素的起点开始排列时使用。
End - 在内容或项目从容器元素的末尾开始排列时使用。
Center - 用于将子元素居中对齐。
Normal - 这是align content属性的默认值。
Flex-start - 在flexbox类型的容器上使用，将从起始边开始对齐项目。但是，如果我们将其用于非flexbox容器，它将被视为开始。
Flex-end - 与flex-start类似，也是用于flexbox类型的容器，并将从结束边开始对齐项目。但是，如果我们将其用于非flexbox容器，它将被视为结束。
Space-between - 使用此属性指定的项目将沿容器的交叉轴对齐，并且相邻元素之间具有相同的间距。
Space-around - 它与space between类似，但同时，第一个元素的左侧和最后一个元素的右侧将有与相邻两个元素之间间距的一半相等的空间。
Space-evenly - 这意味着所有元素之间具有相同的间距，与均匀间距不同，其只从第一个元素的开头到最后一个元素的结尾有一半的间距。
Stretch - 它自动更改具有与之关联的自动大小的容器内的项目的大小。

除了这些，我们还有safe和unsafe作为此属性的值。这些值与对齐关键字一起使用，取决于容器的特性，例如溢出是否会导致数据丢失。根据这些条件，我们选择是否保留对齐方式。

示例

下面给出了关于 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>

将默认值设置为对齐内容

术语“默认值 ”实际上可以指“初始值 ”的属性。align-items的默认值是“stretch”。

因此，我们可以说，“normal”有点像一个具有指定含义的特殊关键字，但它的含义会随着使用上下文而改变。由于没有特定的上下文，我们不能定义“normal”将会做什么。

我们可以放心地使用“normal”作为默认值，因为它要么被视为无效并使用回退值，要么被视为有效并回退到适当的值。

示例

下面是一个将对齐内容的默认值设置为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>

如我们所见，容器中的所有项目都按照默认值对齐，即根据flexbox容器的规范进行拉伸。