在 HTML 中将一个 Flexbox 元素居中对齐，并将其他元素右/左对齐

htmlweb developmentfront end technology更新于 2024/6/6 13:32:17

假设 P、Q、R、S、T 元素在网页中央对齐 -

                                P Q R S T

我们希望上面的内容保持不变，除了最右边的，即 T 向右移动，像这样 −

                                 P Q R S                                 T

现在让我们看一些示例来实现上述内容。

将一个 Flexbox 元素居中，并使用自动边距将其他 Flexbox 元素右/左对齐

示例

结合使用自动边距和新的不可见 Flexbox 元素，可以在网页上实现上述布局 -


<html>
<title>Example</title>
<head>
   <style>
      li:first-child {
         margin-right: auto;
         visibility: hidden;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
         margin-top: 0;
      }
   </style>
<head>
<body>
   <ul>
      <li>T</li>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

使用伪元素将一个 Flexbox 元素居中，并将其他 Flexbox 元素右/左对齐

在此示例中，我们将创建一个与 T 宽度相同的伪元素。使用 ::before 将其放置在容器的起始位置。

示例

现在让我们看一个例子 -


<html>
<title>Example</title>
<head>
   <style>
      ul::before {
         content: "T";
         margin: 1px auto 1px 1px;
         visibility: hidden;
         padding: 5px;
         background: orange;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

使用网格布局将一个弹性框元素居中，并将其他弹性框元素右/左对齐

在此示例中，创建一个包含多列的网格。然后将您的项目放置在中间和末尾的列中。

示例

现在让我们看一个例子 -


<html>
<title>Example</title>
<head>
   <style>
      ul {
         display: grid;
         grid-template-columns: 1fr repeat(4, auto) 1fr;
         grid-column-gap: 5px;
         justify-items: center;
      }
      li:nth-child(1) {
         grid-column-start: 2;
      }
      li:nth-child(5) {
         margin-left: auto;
      }
      ul {
         padding: 0;
         margin: 0;
         list-style: none;
      }
      li {
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>