基礎 - 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/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdn.jsdelivr.net/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/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdn.jsdelivr.net/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

列印頁面