master

分支 (1)

管理

管理

master

Light-Year-Admin-Using-Iframe-v5
/
lyear_utilities_flex.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>弹性布局 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">弹性布局</div></header>
        <div class="card-body">

          <p>使用一整套响应式 flexbox 实用程序快速管理网格列、导航、组件等的布局、对齐和大小。对于更复杂的实现，可能需要自定义 CSS。</p>

          <h6>启用弹性行为</h6>
          <p>应用 <code>display</code> 实用程序来创建 flexbox 容器并将直接子元素转换为 flex 项。 Flex 容器和项目可以通过额外的 flex 属性进一步修改。</p>
          <div class="border-example">
            <div class="d-flex p-2 border-highlight">我是一个 flexbox 容器！</div>
          </div>
          <pre>&lt;div class="d-flex p-2 border-highlight"&gt;我是一个 flexbox 容器！&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-inline-flex p-2 border-highlight">我是一个内联的 flexbox 容器！</div>
          </div>
          <pre>&lt;div class="d-inline-flex p-2 border-highlight"&gt;我是一个内联的 flexbox 容器！&lt;/div&gt;</pre>

          <p><code>.d-flex</code> 和 <code>.d-inline-flex</code> 也存在响应变体。</p>
          <ul>
            <li><code>.d-flex</code></li>
            <li><code>.d-inline-flex</code></li>
            <li><code>.d-sm-flex</code></li>
            <li><code>.d-sm-inline-flex</code></li>
            <li><code>.d-md-flex</code></li>
            <li><code>.d-md-inline-flex</code></li>
            <li><code>.d-lg-flex</code></li>
            <li><code>.d-lg-inline-flex</code></li>
            <li><code>.d-xl-flex</code></li>
            <li><code>.d-xl-inline-flex</code></li>
            <li><code>.d-xxl-flex</code></li>
            <li><code>.d-xxl-inline-flex</code></li>
          </ul>

          <h6>方向</h6>
          <p>使用方向实用程序在 flex 容器中设置 flex 项目的方向。在大多数情况下，您可以在此处省略水平类，因为浏览器默认为 <code>row</code>。但是，您可能会遇到需要显式设置此值的情况（例如响应式布局）。</p>

          <p>使用 <code>.flex-row</code> 设置水平方向（浏览器默认），或使用 <code>.flex-row-reverse</code> 从另一侧开始水平方向。</p>
          <div class="border-example">
            <div class="d-flex flex-row border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目 1</div>
              <div class="p-2 border-highlight">Flex 项目 2</div>
              <div class="p-2 border-highlight">Flex 项目 3</div>
            </div>
            <div class="d-flex flex-row-reverse border-highlight">
              <div class="p-2 border-highlight">Flex 项目 1</div>
              <div class="p-2 border-highlight">Flex 项目 2</div>
              <div class="p-2 border-highlight">Flex 项目 3</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex flex-row border-highlight mb-3"&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 1&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 2&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="d-flex flex-row-reverse border-highlight"&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 1&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 2&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 3&lt;/div&gt;
&lt;/div&gt;</pre>

          <p>使用 <code>.flex-column</code> 设置垂直方向，或使用 <code>.flex-column-reverse</code> 从另一侧开始垂直方向。</p>
          <div class="border-example">
            <div class="d-flex flex-column border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目 1</div>
              <div class="p-2 border-highlight">Flex 项目 2</div>
              <div class="p-2 border-highlight">Flex 项目 3</div>
            </div>
            <div class="d-flex flex-column-reverse border-highlight">
              <div class="p-2 border-highlight">Flex 项目 1</div>
              <div class="p-2 border-highlight">Flex 项目 2</div>
              <div class="p-2 border-highlight">Flex 项目 3</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex flex-column border-highlight mb-3"&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 1&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 2&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="d-flex flex-column-reverse border-highlight"&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 1&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 2&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目 3&lt;/div&gt;
&lt;/div&gt;</pre>

          <p><code>flex-direction</code> 也存在响应变化。</p>
          <ul>
            <li><code>.flex-row</code></li>
            <li><code>.flex-row-reverse</code></li>
            <li><code>.flex-column</code></li>
            <li><code>.flex-column-reverse</code></li>
            <li><code>.flex-sm-row</code></li>
            <li><code>.flex-sm-row-reverse</code></li>
            <li><code>.flex-sm-column</code></li>
            <li><code>.flex-sm-column-reverse</code></li>
            <li><code>.flex-md-row</code></li>
            <li><code>.flex-md-row-reverse</code></li>
            <li><code>.flex-md-column</code></li>
            <li><code>.flex-md-column-reverse</code></li>
            <li><code>.flex-lg-row</code></li>
            <li><code>.flex-lg-row-reverse</code></li>
            <li><code>.flex-lg-column</code></li>
            <li><code>.flex-lg-column-reverse</code></li>
            <li><code>.flex-xl-row</code></li>
            <li><code>.flex-xl-row-reverse</code></li>
            <li><code>.flex-xl-column</code></li>
            <li><code>.flex-xl-column-reverse</code></li>
            <li><code>.flex-xxl-row</code></li>
            <li><code>.flex-xxl-row-reverse</code></li>
            <li><code>.flex-xxl-column</code></li>
            <li><code>.flex-xxl-column-reverse</code></li>
          </ul>

          <h6>使...对齐</h6>
          <p>在 flexbox 容器上使用 <code>justify-content</code> 实用程序来更改 flex 项目在主轴上的对齐方式（x 轴开始，y 轴如果 <code>flex-direction: column</code>）。从<code>start</code>（浏览器默认）、<code>end</code>、<code>center</code>、<code>between</code>、<code>around</code> 或者 <code>evenly</code>。</p>
          <div class="border-example">
            <div class="d-flex justify-content-start border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex justify-content-end border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex justify-content-center border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex justify-content-between border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex justify-content-around border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex justify-content-evenly border-highlight">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex justify-content-start"&gt;...&lt;/div&gt;
&lt;div class="d-flex justify-content-end"&gt;...&lt;/div&gt;
&lt;div class="d-flex justify-content-center"&gt;...&lt;/div&gt;
&lt;div class="d-flex justify-content-between"&gt;...&lt;/div&gt;
&lt;div class="d-flex justify-content-around"&gt;...&lt;/div&gt;
&lt;div class="d-flex justify-content-evenly"&gt;...&lt;/div&gt;</pre>

          <p><code>justify-content</code> 也存在响应式变体。</p>
          <ul>
            <li><code>.justify-content-start</code></li>
            <li><code>.justify-content-end</code></li>
            <li><code>.justify-content-center</code></li>
            <li><code>.justify-content-between</code></li>
            <li><code>.justify-content-around</code></li>
            <li><code>.justify-content-evenly</code></li>
            <li><code>.justify-content-sm-start</code></li>
            <li><code>.justify-content-sm-end</code></li>
            <li><code>.justify-content-sm-center</code></li>
            <li><code>.justify-content-sm-between</code></li>
            <li><code>.justify-content-sm-around</code></li>
            <li><code>.justify-content-sm-evenly</code></li>
            <li><code>.justify-content-md-start</code></li>
            <li><code>.justify-content-md-end</code></li>
            <li><code>.justify-content-md-center</code></li>
            <li><code>.justify-content-md-between</code></li>
            <li><code>.justify-content-md-around</code></li>
            <li><code>.justify-content-md-evenly</code></li>
            <li><code>.justify-content-lg-start</code></li>
            <li><code>.justify-content-lg-end</code></li>
            <li><code>.justify-content-lg-center</code></li>
            <li><code>.justify-content-lg-between</code></li>
            <li><code>.justify-content-lg-around</code></li>
            <li><code>.justify-content-lg-evenly</code></li>
            <li><code>.justify-content-xl-start</code></li>
            <li><code>.justify-content-xl-end</code></li>
            <li><code>.justify-content-xl-center</code></li>
            <li><code>.justify-content-xl-between</code></li>
            <li><code>.justify-content-xl-around</code></li>
            <li><code>.justify-content-xl-evenly</code></li>
            <li><code>.justify-content-xxl-start</code></li>
            <li><code>.justify-content-xxl-end</code></li>
            <li><code>.justify-content-xxl-center</code></li>
            <li><code>.justify-content-xxl-between</code></li>
            <li><code>.justify-content-xxl-around</code></li>
            <li><code>.justify-content-xxl-evenly</code></li>
          </ul>

          <h6>对齐项目</h6>
          <p>在 flexbox 容器上使用 <code>align-items</code> 实用程序来更改 flex 项目在交叉轴上的对齐方式（y 轴开始，x 轴如果 <code>flex-direction: column</code>）。从 <code>start</code>、<code>end</code>、<code>center</code>、<code>baseline</code> 或者 <code>stretch</code>（浏览器默认）中选择。</p>
          <div class="border-example">
            <div class="d-flex align-items-start border-highlight mb-3" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex align-items-end border-highlight mb-3" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex align-items-center border-highlight mb-3" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex align-items-baseline border-highlight mb-3" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex align-items-stretch border-highlight" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-items-start"&gt;...&lt;/div&gt;
&lt;div class="d-flex align-items-end"&gt;...&lt;/div&gt;
&lt;div class="d-flex align-items-center"&gt;...&lt;/div&gt;
&lt;div class="d-flex align-items-baseline"&gt;...&lt;/div&gt;
&lt;div class="d-flex align-items-stretch"&gt;...&lt;/div&gt;</pre>

          <p><code>align-items</code> 也存在响应变化。</p>
          <ul>
            <li><code>.align-items-start</code></li>
            <li><code>.align-items-end</code></li>
            <li><code>.align-items-center</code></li>
            <li><code>.align-items-baseline</code></li>
            <li><code>.align-items-stretch</code></li>
            <li><code>.align-items-sm-start</code></li>
            <li><code>.align-items-sm-end</code></li>
            <li><code>.align-items-sm-center</code></li>
            <li><code>.align-items-sm-baseline</code></li>
            <li><code>.align-items-sm-stretch</code></li>
            <li><code>.align-items-md-start</code></li>
            <li><code>.align-items-md-end</code></li>
            <li><code>.align-items-md-center</code></li>
            <li><code>.align-items-md-baseline</code></li>
            <li><code>.align-items-md-stretch</code></li>
            <li><code>.align-items-lg-start</code></li>
            <li><code>.align-items-lg-end</code></li>
            <li><code>.align-items-lg-center</code></li>
            <li><code>.align-items-lg-baseline</code></li>
            <li><code>.align-items-lg-stretch</code></li>
            <li><code>.align-items-xl-start</code></li>
            <li><code>.align-items-xl-end</code></li>
            <li><code>.align-items-xl-center</code></li>
            <li><code>.align-items-xl-baseline</code></li>
            <li><code>.align-items-xl-stretch</code></li>
            <li><code>.align-items-xxl-start</code></li>
            <li><code>.align-items-xxl-end</code></li>
            <li><code>.align-items-xxl-center</code></li>
            <li><code>.align-items-xxl-baseline</code></li>
            <li><code>.align-items-xxl-stretch</code></li>
          </ul>

          <h6>自我排列</h6>
          <p>在 flexbox 项目上使用 <code>align-self</code> 实用程序来单独更改它们在交叉轴上的对齐方式（y 轴开始，x 轴如果 <code>flex-direction: column</code>）。从与 <code>align-items</code> 相同的选项中进行选择：<code>start</code>、<code>end</code>、<code>center</code>、<code>baseline</code> 或者 <code>stretch</code>（浏览器默认）。</p>
          <div class="border-example">
            <div class="d-flex border-highlight mb-3" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="align-self-start p-2 border-highlight">Aligned flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex border-highlight mb-3" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="align-self-end p-2 border-highlight">Aligned flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex border-highlight mb-3" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="align-self-center p-2 border-highlight">Aligned flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex border-highlight mb-3" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="align-self-baseline p-2 border-highlight">Aligned flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
            <div class="d-flex border-highlight" style="height: 100px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="align-self-stretch p-2 border-highlight">Aligned flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="align-self-start"&gt;Aligned flex 项目&lt;/div&gt;
&lt;div class="align-self-end"&gt;Aligned flex 项目&lt;/div&gt;
&lt;div class="align-self-center"&gt;Aligned flex 项目&lt;/div&gt;
&lt;div class="align-self-baseline"&gt;Aligned flex 项目&lt;/div&gt;
&lt;div class="align-self-stretch"&gt;Aligned flex 项目&lt;/div&gt;</pre>

          <p>align-self 也存在响应变化。</p>
          <ul>
            <li><code>.align-self-start</code></li>
            <li><code>.align-self-end</code></li>
            <li><code>.align-self-center</code></li>
            <li><code>.align-self-baseline</code></li>
            <li><code>.align-self-stretch</code></li>
            <li><code>.align-self-sm-start</code></li>
            <li><code>.align-self-sm-end</code></li>
            <li><code>.align-self-sm-center</code></li>
            <li><code>.align-self-sm-baseline</code></li>
            <li><code>.align-self-sm-stretch</code></li>
            <li><code>.align-self-md-start</code></li>
            <li><code>.align-self-md-end</code></li>
            <li><code>.align-self-md-center</code></li>
            <li><code>.align-self-md-baseline</code></li>
            <li><code>.align-self-md-stretch</code></li>
            <li><code>.align-self-lg-start</code></li>
            <li><code>.align-self-lg-end</code></li>
            <li><code>.align-self-lg-center</code></li>
            <li><code>.align-self-lg-baseline</code></li>
            <li><code>.align-self-lg-stretch</code></li>
            <li><code>.align-self-xl-start</code></li>
            <li><code>.align-self-xl-end</code></li>
            <li><code>.align-self-xl-center</code></li>
            <li><code>.align-self-xl-baseline</code></li>
            <li><code>.align-self-xl-stretch</code></li>
            <li><code>.align-self-xxl-start</code></li>
            <li><code>.align-self-xxl-end</code></li>
            <li><code>.align-self-xxl-center</code></li>
            <li><code>.align-self-xxl-baseline</code></li>
            <li><code>.align-self-xxl-stretch</code></li>
          </ul>

          <h6>(使)充满</h6>
          <p>在一系列同级元素上使用 <code>.flex-fill</code> 类来强制它们的宽度等于它们的内容（或者如果它们的内容不超过它们的边界框，则它们的宽度相等），同时占用所有可用的水平空间。</p>
          <div class="border-example">
            <div class="d-flex border-highlight">
              <div class="p-2 flex-fill border-highlight">Flex 项目 有很多内容</div>
              <div class="p-2 flex-fill border-highlight">Flex 项目</div>
              <div class="p-2 flex-fill border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex border-highlight"&gt;
  &lt;div class="p-2 flex-fill border-highlight"&gt;Flex 项目 有很多内容&lt;/div&gt;
  &lt;div class="p-2 flex-fill border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 flex-fill border-highlight"&gt;Flex 项目&lt;/div&gt;
&lt;/div&gt;</pre>

          <p><code>flex-fill</code> 也存在响应变化。</p>
          <ul>
            <li><code>.flex-fill</code></li>
            <li><code>.flex-sm-fill</code></li>
            <li><code>.flex-md-fill</code></li>
            <li><code>.flex-lg-fill</code></li>
            <li><code>.flex-xl-fill</code></li>
            <li><code>.flex-xxl-fill</code></li>
          </ul>

          <h6>增长和收缩</h6>
          <p>使用 <code>.flex-grow-*</code> 实用程序来切换弹性项目的增长能力以填充可用空间。在下面的示例中， <code>.flex-grow-1</code> 元素使用了它可以使用的所有可用空间，同时为剩余的两个弹性项目留出了必要的空间。</p>
          <div class="border-example">
            <div class="d-flex border-highlight">
              <div class="p-2 flex-grow-1 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">第三个 flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex border-highlight"&gt;
  &lt;div class="p-2 flex-grow-1 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;第三个 flex 项目&lt;/div&gt;
&lt;/div&gt;</pre>

          <p>如有必要，使用 <code>.flex-shrink-*</code> 实用程序来切换弹性项目的收缩能力。在下面的示例中，带有 <code>.flex-shrink-1</code> 的第二个弹性项目被强制将其内容换行到一个新行，“收缩”以为前一个带有 <code>.w-100</code> 的弹性项目留出更多空间。</p>
          <div class="border-example">
            <div class="d-flex border-highlight">
              <div class="p-2 w-100 border-highlight">Flex 项目</div>
              <div class="p-2 flex-shrink-1 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex border-highlight"&gt;
  &lt;div class="p-2 w-100 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 flex-shrink-1 border-highlight"&gt;Flex 项目&lt;/div&gt;
&lt;/div&gt;</pre>

          <p><code>flex-grow</code> 和 <code>flex-shrink</code> 也存在响应变化。</p>
          <ul>
            <li><code>.flex-{grow|shrink}-0</code></li>
            <li><code>.flex-{grow|shrink}-1</code></li>
            <li><code>.flex-sm-{grow|shrink}-0</code></li>
            <li><code>.flex-sm-{grow|shrink}-1</code></li>
            <li><code>.flex-md-{grow|shrink}-0</code></li>
            <li><code>.flex-md-{grow|shrink}-1</code></li>
            <li><code>.flex-lg-{grow|shrink}-0</code></li>
            <li><code>.flex-lg-{grow|shrink}-1</code></li>
            <li><code>.flex-xl-{grow|shrink}-0</code></li>
            <li><code>.flex-xl-{grow|shrink}-1</code></li>
            <li><code>.flex-xxl-{grow|shrink}-0</code></li>
            <li><code>.flex-xxl-{grow|shrink}-1</code></li>
          </ul>

          <h6>自动边距</h6>
          <p>当您将 flex 对齐与自动边距混合使用时，Flexbox 可以做一些非常棒的事情。下面显示了通过自动边距控制弹性项目的三个示例：默认（无自动边距）、向右推动两个项目（<code>.me-auto</code>）和向左推动两个项目（<code>.ms-auto</code>）。</p>
          <div class="border-example">
            <div class="d-flex border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>

            <div class="d-flex border-highlight mb-3">
              <div class="me-auto p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>

            <div class="d-flex border-highlight mb-3">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="ms-auto p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex border-highlight mb-3"&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
&lt;/div&gt;

&lt;div class="d-flex border-highlight mb-3"&gt;
  &lt;div class="me-auto p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
&lt;/div&gt;

&lt;div class="d-flex border-highlight mb-3"&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="ms-auto p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
&lt;/div&gt;</pre>

          <h6>使用对齐项</h6>
          <p>通过混合 <code>align-items</code>、<code>flex-direction: column</code> 和 <code>margin-top: auto</code> 或 <code>margin-bottom: auto</code> 将一个弹性项目垂直移动到容器的顶部或底部。</p>
          <div class="border-example">
            <div class="d-flex align-items-start flex-column border-highlight mb-3" style="height: 200px;">
              <div class="mb-auto p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>

            <div class="d-flex align-items-end flex-column border-highlight mb-3" style="height: 200px;">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="mt-auto p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-items-start flex-column border-highlight mb-3" style="height: 200px;"&gt;
  &lt;div class="mb-auto p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
&lt;/div&gt;

&lt;div class="d-flex align-items-end flex-column border-highlight mb-3" style="height: 200px;"&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
  &lt;div class="mt-auto p-2 border-highlight"&gt;Flex 项目&lt;/div&gt;
&lt;/div&gt;</pre>

          <h6>wrap</h6>
          <p>更改弹性项目在弹性容器中的包装方式。使用 <code>.flex-nowrap</code> 选择完全不换行（浏览器默认设置）、使用 <code>.flex-wrap</code> 进行换行或使用 <code>.flex-wrap-reverse</code> 进行反向换行。</p>
          <div class="border-example">
            <div class="d-flex flex-nowrap border-highlight" style="width: 8rem;">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex flex-nowrap"&gt;
  ...
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex flex-wrap border-highlight">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex flex-wrap"&gt;
  ...
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex flex-wrap-reverse border-highlight">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex flex-wrap-reverse"&gt;
  ...
&lt;/div&gt;</pre>

          <p><code>flex-wrap</code> 也存在响应变体。</p>
          <ul>
            <li><code>.flex-nowrap</code></li>
            <li><code>.flex-wrap</code></li>
            <li><code>.flex-wrap-reverse</code></li>
            <li><code>.flex-sm-nowrap</code></li>
            <li><code>.flex-sm-wrap</code></li>
            <li><code>.flex-sm-wrap-reverse</code></li>
            <li><code>.flex-md-nowrap</code></li>
            <li><code>.flex-md-wrap</code></li>
            <li><code>.flex-md-wrap-reverse</code></li>
            <li><code>.flex-lg-nowrap</code></li>
            <li><code>.flex-lg-wrap</code></li>
            <li><code>.flex-lg-wrap-reverse</code></li>
            <li><code>.flex-xl-nowrap</code></li>
            <li><code>.flex-xl-wrap</code></li>
            <li><code>.flex-xl-wrap-reverse</code></li>
            <li><code>.flex-xxl-nowrap</code></li>
            <li><code>.flex-xxl-wrap</code></li>
            <li><code>.flex-xxl-wrap-reverse</code></li>
          </ul>

          <h6>排序</h6>
          <p>使用一些 <code>order</code> 实用程序更改特定弹性项目的视觉顺序。我们只提供最先或最后制作项目的选项，以及重置以使用 DOM 顺序。由于 <code>order</code> 采用 0 到 5 之间的任何整数值，因此为所需的任何其他值添加自定义 CSS。</p>
          <div class="border-example">
            <div class="d-flex flex-nowrap border-highlight">
              <div class="order-3 p-2 border-highlight">First flex 项目</div>
              <div class="order-2 p-2 border-highlight">Second flex 项目</div>
              <div class="order-1 p-2 border-highlight">Third flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex flex-nowrap border-highlight"&gt;
  &lt;div class="order-3 p-2 border-highlight"&gt;First flex 项目&lt;/div&gt;
  &lt;div class="order-2 p-2 border-highlight"&gt;Second flex 项目&lt;/div&gt;
  &lt;div class="order-1 p-2 border-highlight"&gt;Third flex 项目&lt;/div&gt;
&lt;/div&gt;</pre>

          <p><code>order</code> 也存在响应变化。</p>
          <ul>
            <li><code>.order-0</code></li>
            <li><code>.order-1</code></li>
            <li><code>.order-2</code></li>
            <li><code>.order-3</code></li>
            <li><code>.order-4</code></li>
            <li><code>.order-5</code></li>
            <li><code>.order-sm-0</code></li>
            <li><code>.order-sm-1</code></li>
            <li><code>.order-sm-2</code></li>
            <li><code>.order-sm-3</code></li>
            <li><code>.order-sm-4</code></li>
            <li><code>.order-sm-5</code></li>
            <li><code>.order-md-0</code></li>
            <li><code>.order-md-1</code></li>
            <li><code>.order-md-2</code></li>
            <li><code>.order-md-3</code></li>
            <li><code>.order-md-4</code></li>
            <li><code>.order-md-5</code></li>
            <li><code>.order-lg-0</code></li>
            <li><code>.order-lg-1</code></li>
            <li><code>.order-lg-2</code></li>
            <li><code>.order-lg-3</code></li>
            <li><code>.order-lg-4</code></li>
            <li><code>.order-lg-5</code></li>
            <li><code>.order-xl-0</code></li>
            <li><code>.order-xl-1</code></li>
            <li><code>.order-xl-2</code></li>
            <li><code>.order-xl-3</code></li>
            <li><code>.order-xl-4</code></li>
            <li><code>.order-xl-5</code></li>
            <li><code>.order-xxl-0</code></li>
            <li><code>.order-xxl-1</code></li>
            <li><code>.order-xxl-2</code></li>
            <li><code>.order-xxl-3</code></li>
            <li><code>.order-xxl-4</code></li>
            <li><code>.order-xxl-5</code></li>
          </ul>

          <p>此外，还有响应式 <code>.order-first</code> 和 <code>.order-last</code> 类，它们分别通过应用 <code>order: -1</code> 和 <code>order: 6</code> 来改变元素的 <code>order</code>。</p>
          <ul>
            <li><code>.order-first</code></li>
            <li><code>.order-last</code></li>
            <li><code>.order-sm-first</code></li>
            <li><code>.order-sm-last</code></li>
            <li><code>.order-md-first</code></li>
            <li><code>.order-md-last</code></li>
            <li><code>.order-lg-first</code></li>
            <li><code>.order-lg-last</code></li>
            <li><code>.order-xl-first</code></li>
            <li><code>.order-xl-last</code></li>
            <li><code>.order-xxl-first</code></li>
            <li><code>.order-xxl-last</code></li>
          </ul>

          <h6>对齐内容</h6>
          <p>在 flexbox 容器上使用 <code>align-content</code> 实用程序将 flex 项在交叉轴上对齐。从 <code>start</code>（浏览器默认）、<code>end</code>、<code>center</code>、<code>between</code>、<code>around</code> 或 <code>stretch</code> 中选择。为了演示这些实用程序，我们强制执行了 <code>flex-wrap: wrap</code> 并增加了弹性项目的数量。</p>

          <p><strong>当心！</strong> 此属性对单行弹性项目没有影响。</p>
          <div class="border-example">
            <div class="d-flex align-content-start flex-wrap border-highlight mb-3" style="height: 200px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-content-start flex-wrap"&gt;
  ...
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex align-content-end flex-wrap border-highlight mb-3" style="height: 200px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-content-end flex-wrap"&gt;
  ...
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex align-content-center flex-wrap border-highlight mb-3" style="height: 200px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-content-center flex-wrap"&gt;
  ...
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex align-content-between flex-wrap border-highlight mb-3" style="height: 200px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-content-between flex-wrap"&gt;
  ...
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex align-content-around flex-wrap border-highlight mb-3" style="height: 200px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-content-around flex-wrap"&gt;
  ...
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex align-content-stretch flex-wrap border-highlight mb-3" style="height: 200px">
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
              <div class="p-2 border-highlight">Flex 项目</div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-content-stretch flex-wrap"&gt;
  ...
&lt;/div&gt;</pre>

          <p><code>align-content</code> 也存在响应变化。</p>
          <ul>
            <li><code>.align-content-start</code></li>
            <li><code>.align-content-end</code></li>
            <li><code>.align-content-center</code></li>
            <li><code>.align-content-between</code></li>
            <li><code>.align-content-around</code></li>
            <li><code>.align-content-stretch</code></li>
            <li><code>.align-content-sm-start</code></li>
            <li><code>.align-content-sm-end</code></li>
            <li><code>.align-content-sm-center</code></li>
            <li><code>.align-content-sm-between</code></li>
            <li><code>.align-content-sm-around</code></li>
            <li><code>.align-content-sm-stretch</code></li>
            <li><code>.align-content-md-start</code></li>
            <li><code>.align-content-md-end</code></li>
            <li><code>.align-content-md-center</code></li>
            <li><code>.align-content-md-between</code></li>
            <li><code>.align-content-md-around</code></li>
            <li><code>.align-content-md-stretch</code></li>
            <li><code>.align-content-lg-start</code></li>
            <li><code>.align-content-lg-end</code></li>
            <li><code>.align-content-lg-center</code></li>
            <li><code>.align-content-lg-between</code></li>
            <li><code>.align-content-lg-around</code></li>
            <li><code>.align-content-lg-stretch</code></li>
            <li><code>.align-content-xl-start</code></li>
            <li><code>.align-content-xl-end</code></li>
            <li><code>.align-content-xl-center</code></li>
            <li><code>.align-content-xl-between</code></li>
            <li><code>.align-content-xl-around</code></li>
            <li><code>.align-content-xl-stretch</code></li>
            <li><code>.align-content-xxl-start</code></li>
            <li><code>.align-content-xxl-end</code></li>
            <li><code>.align-content-xxl-center</code></li>
            <li><code>.align-content-xxl-between</code></li>
            <li><code>.align-content-xxl-around</code></li>
            <li><code>.align-content-xxl-stretch</code></li>
          </ul>

          <h6>媒体对象</h6>
          <p>想要从 Bootstrap 4 复制媒体对象组件？使用一些 flex 实用程序立即重新创建它，这些实用程序允许比以前更大的灵活性和自定义。</p>
          <div class="border-example">
            <div class="d-flex">
              <div class="flex-shrink-0">
                <img src="images/img-placeholder.png" alt="...">
              </div>
              <div class="flex-grow-1 ms-3">
                《因话录》，唐代汉族文言笔记小说集。本书所记皆唐代事。共6卷，分为5部：卷一宫部为君，记帝王；卷二、卷三商部为臣，记公卿；卷四角部为人，记不仕者，并附以谐戏；卷五征部为事，多记典故；卷六羽部为物，记无所归附的见闻杂事。
              </div>
            </div>
          </div>
          <pre>&lt;div class="d-flex"&gt;
  &lt;div class="flex-shrink-0"&gt;
    &lt;img src="images/img-placeholder.png" alt="..."&gt;
  &lt;/div&gt;
  &lt;div class="flex-grow-1 ms-3"&gt;
    《因话录》，唐代汉族文言笔记小说集。本书所记皆唐代事。共6卷，分为5部：卷一宫部为君，记帝王；卷二、卷三商部为臣，记公卿；卷四角部为人，记不仕者，并附以谐戏；卷五征部为事，多记典故；卷六羽部为物，记无所归附的见闻杂事。
  &lt;/div&gt;
&lt;/div&gt;</pre>

          <p>并假设您要将图像旁边的内容垂直居中：</p>
          <div class="border-example">
            <div class="d-flex align-items-center">
              <div class="flex-shrink-0">
                <img src="images/img-placeholder.png" alt="...">
              </div>
              <div class="flex-grow-1 ms-3">
                《夏商野史》是钟惺创作的中国史类书籍。前十九回叙述夏朝历史，重点比较了圣君贤臣与昏君小人两类角色；后十二回叙述商朝历史，重点描述了周灭商的经过。
              </div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-items-center"&gt;
  &lt;div class="flex-shrink-0"&gt;
    &lt;img src="images/img-placeholder.png" alt="..."&gt;
  &lt;/div&gt;
  &lt;div class="flex-grow-1 ms-3"&gt;
    《夏商野史》是钟惺创作的中国史类书籍。前十九回叙述夏朝历史，重点比较了圣君贤臣与昏君小人两类角色；后十二回叙述商朝历史，重点描述了周灭商的经过。
  &lt;/div&gt;
&lt;/div&gt;</pre>

        </div>
      </div>
    </div>

  </div>

</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>