CSS 如何使用 flex 水平显示 hr

在本文中，我们将介绍如何使用 CSS 的 flex 属性将水平线（hr）水平显示。
hr 元素是用来插入水平线的标签，通常用于分隔内容。在默认情况下，hr 元素是水平显示的。但是，我们可以使用 CSS 的 flex 属性来控制其水平位置和布局。

阅读更多：CSS 教程

CSS Flex 属性

CSS 的 flex 属性是一个强大的布局工具，用于控制元素在容器中的排列和分布。它借助于弹性盒模型（flexbox），可以轻松地实现各种布局需求。

Flex 属性可以应用于容器元素，用于定义其子元素的排列方式和空间分配规则。主要的 flex 属性包括 flex-direction、flex-wrap、flex-flow、justify-content 和 align-items。

flex-direction：用于指定子元素的排列方向，取值包括 row（水平排列，默认）、row-reverse（水平逆序排列）、column（垂直排列）和 column-reverse（垂直逆序排列）。
flex-wrap：用于指定子元素是否换行，取值包括 nowrap（不换行，默认）和 wrap（换行）。
flex-flow：是 flex-direction 和 flex-wrap 的简写形式，用于同时指定二者的取值。
justify-content：用于指定子元素在主轴上的对齐方式，取值包括 flex-start（默认，头部对齐）、flex-end（尾部对齐）、center（居中对齐）、space-between（两端对齐，元素间距相等）和 space-around（两端对齐，元素间距相等且元素之间的空间相等）。
align-items：用于指定子元素在交叉轴上的对齐方式，取值包括 flex-start（头部对齐）、flex-end（尾部对齐）、center（居中对齐）、baseline（基线对齐，默认）和 stretch（拉伸对齐）。

水平显示 hr 的示例

接下来，我们将通过示例演示如何使用 flex 属性将 hr 水平显示。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container hr {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <hr>
    </div>
  </body>
</html>

在上述示例中，我们创建了一个名为 “container” 的容器 div，并将其 display 属性设置为 flex。通过设置 align-items 和 justify-content 属性为 center，我们可以使 hr 元素在水平方向上居中显示。

同时，我们还设置了 hr 元素的宽度为 100%，以填满容器的宽度。

运行以上代码，您将看到 hr 元素水平居中显示，并填满了容器的宽度。