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

WBOY 转载: 2023-08-30 09:09:06 384浏览

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

对齐内容属性用于在属于弹性盒或网格的项目之间或周围分配空间。该属性的初始值为“正常”。它具有离散动画，并且计算值始终等于指定值。

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

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

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

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

示例

下面给出了对齐内容属性的示例。

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

设置默认值以对齐内容

术语“默认值”实际上可以指属性的“初始值”。对齐项目的默认值为“拉伸”。

因此，我们可以说“正常”有点像具有特定含义的特殊关键字，但会根据其使用的上下文而变化。因为如果没有特定的背景，我们就无法定义“正常”会做什么。

我们可以使用正常作为默认值，无需担心，因为它要么被视为无效并使用回退值，要么被视为有效并回退到正确的值。

示例

下面给出了将对齐内容的默认值设置为正常的示例代码 -

<!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 容器的规范进行拉伸。