搜尋

首頁  >  問答  >  主體

對齊內容和對齊項目有什麼不同?

<p><code>align-items</code> 和 <code>align-content</code> 有什麼差別? </p>
P粉316423089P粉316423089466 天前508

全部回覆(1)我來回復

  • P粉536532781

    P粉5365327812023-08-24 16:57:07

    flex-box 的 align-items 屬性沿著橫軸對齊 Flex 容器內的項目,就像 justify-content 沿著主軸對齊一樣。 (對於預設的flex-direction: row ,交叉軸對應於垂直方向,主軸對應於水平方向。使用flex-direction: column 時,這兩個軸可以分別互換)。

    以下是 align-items:center 外觀的範例:

    但是 align-content 適用於多行靈活框。當項目位於一行中時,它沒有任何效果。它根據其價值來調整整個結構。以下是 align-content: space-around; 的範例:

    #

    這是 align-content: space-around;align-items:center 的外觀:

    #

    請注意,第一行中的第三個框和所有其他框都會變更為在該行中垂直居中。

    以下是一些可以使用的 codepen 連結:

    http://codepen.io/asim-coder/pen/MKQWbb< /p>#

    http://codepen.io/asim-coder/pen/WrMNWR< /p>#

    這是一支超酷的筆,它可以顯示並讓您可以使用 Flexbox 中的幾乎所有內容。

    回覆
    0
  • 取消回覆