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

Question

align-items 和 align-content 有什麼差別？

Answer 1

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#

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

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