CSS 如何设置默认值来对齐内容

CSS是一种网络语言，它主要用于设计和展示网页。它为我们提供了很多属性，这些属性将有助于我们的定制过程。其中一个属性是”对齐内容属性”。

对齐内容属性用于分配空间，无论是在属于 Flexbox 或网格的项目之间或周围。这个属性的初始值是”正常”。它有离散的动画，而且计算值总是等于指定的值。

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

可以提供给这个属性的各种值描述如下

Start – 当你想让内容或项目从容器元素的起点开始打包时使用。
End – 当你想让内容或项目从容器元素的末端开始打包时使用。
Center – 用于将子元素包装在对齐容器的中心。
Normal – 它是对齐内容属性的默认值。
Flex-start – 在flexbox类型的容器中使用，将沿着起始边缘开始对齐项目。然而，如果我们在一个不是flexbox的容器上使用，这将被视为开始。
Flex-end – 就像flex-start一样，它也用于flexbox类型的容器中，并将开始沿结束边缘对齐项目。然而，如果我们在一个不是flexbox的容器上使用它们，这将被视为结束。
Space-between – 用这个属性指定的项目将沿着容器的横轴对齐，并将沿着相邻的元素有相同的空间。
Space-around – 它的工作原理类似于space between，但同时第一个元素的左边和最后一个元素的右边将拥有相当于两个相邻元素之间空间的一半的空间。
Space-evenly – 这只是意味着所有的元素之间有相同的空间，不像空间均匀那样，从第一个元素的开始到最后一个元素的结束只有一半的空间。
Stretch — 它自动改变容器内的项目的尺寸，这些项目有自动尺寸关联。

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

例子

下面是对齐内容属性的例子。

<!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>

设置默认值以对齐内容

术语”默认值”实际上可以被称为属性的”初始值”。对齐项目的默认值是”stretch”。

因此，我们可以说，’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>

我们可以看到，容器中的所有项目都以默认值（normal）对齐，这是按flexbox容器的规格拉伸的。