84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
align-items 和 align-content 有什麼不同？
align-items
align-content
flex-box 的 align-items 屬性沿著橫軸對齊 Flex 容器內的項目，就像 justify-content 沿著主軸對齊一樣。 （對於預設的flex-direction: row ，交叉軸對應於垂直方向，主軸對應於水平方向。使用flex-direction: column 時，這兩個軸可以分別互換）。
justify-content
flex-direction: row
flex-direction: column
以下是 align-items:center 外觀的範例：
align-items:center
但是 align-content 適用於多行靈活框。當項目位於一行中時，它沒有任何效果。它根據其價值來調整整個結構。以下是 align-content: space-around; 的範例：
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 中的幾乎所有內容。
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 中的幾乎所有內容。