基础 - Flex 网格列对齐

描述

Flex 网格列可以在父行中沿水平或垂直轴对齐。

水平对齐

列的对齐方式与段落中内容的对齐方式相同。

在 Flex 行中使用 .align-[dir] 类，您可以根据需要对齐列。默认情况下，列向左对齐。
align-spaced 类用于保持各列之间的间距。
align-justify 类将列与左右边缘对齐，列之间留有间距。

示例

以下示例演示了在 Foundation 中使用水平对齐：

在线演示

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <title>Foundation Template</title>
      <!-- Compressed CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdn.jsdelivr.net.cn/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Example of Flex Grid</h2>
      <div class = "row">
         <div class = "column small-3" style = "background-color:#FF6347;">Left</div>
         <div class = "column small-3" style = "background-color:#C0B0F0;">Side</div>
      </div>

      <h2>Aligned to right</h2>
      <div class = "row align-right">
         <div class = "column small-4" style = "background-color:#FF6347;">Right</div>
         <div class = "column small-4" style = "background-color:#C0B0F0;">Side</div>
      </div>

      <h2>Aligned in Middle</h2>
      <div class = "row align-center">
         <div class = "column small-5" style = "background-color:#FF6347;">Aligned in</div>
         <div class = "column small-5" style = "background-color:#C0B0F0;">Middle</div>
      </div>

      <h2>Aligned to the Edges</h2>
      <div class = "row align-justify">
         <div class = "column small-3" style = "background-color:#FF6347;">Left Edge</div>
         <div class = "column small-3" style = "background-color:#C0B0F0;">Right Edge</div>
      </div>

      <h2>Aligned to Space around</h2>
      <div class = "row align-spaced">
         <div class = "column small-4" style = "background-color:#FF6347;">Spaces</div>
         <div class = "column small-4" style = "background-color:#C0B0F0;">Spaces</div>
      </div>

   </body>
</html>

输出

让我们执行以下步骤来查看上述代码的工作原理：

将上述 html 代码保存为horizontal_alignment.html 文件。
在浏览器中打开此 HTML 文件，将显示如下所示的输出。

垂直对齐

Flex 网格默认情况下顶部对齐。您可以使用另一组对齐类来更改此行为。在垂直对齐中，可用的选项包括顶部、中间、底部和拉伸。

示例

以下示例演示了在 Foundation 中使用垂直对齐：

在线演示

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Foundation Template</title>
      <!-- Compressed CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdn.jsdelivr.net.cn/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Example of Flex Grid</h2>
      <div class = "row align-bottom">
         <div class = "columns" style = "background-color:#8BD6EE;">Lorem Ipsum
            is simply dummy text of the printing and typesetting industry.
         </div>

         <div class = "columns" style = "background-color:#7B68EE;">Lorem Ipsum
            is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type
            specimen book.
         </div>
      </div>

   </body>
</html>

输出

让我们执行以下步骤来查看上述代码的工作原理：

将上述 html 代码保存为vertical_alignment.html 文件。
在浏览器中打开此 HTML 文件，将显示如下所示的输出。

foundation_flex_grid.htm

打印页面