對齊項目和對齊內(nèi)容有什么區(qū)別？

flex-box的align-items屬性沿橫軸對齊flex容器中的項目，就像justify-content沿主軸對齊一樣。(對于默認(rèn)的彎曲方向:行，橫軸對應(yīng)于垂直，主軸對應(yīng)于水平。具有彎曲方向:這兩列分別互換)。

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

但是對齊內(nèi)容是針對多行柔性框的。當(dāng)項目在一行時，它沒有效果。它根據(jù)它的價值排列整個結(jié)構(gòu)。這里有一個對齊內(nèi)容的例子:：

以下是如何對齊內(nèi)容:空間周圍；使用align-items:居中外觀:

請注意，第三個框和第一行中的所有其他框?qū)⒃谠撔兄写怪本又小?/p>

這里有一些codepen鏈接可供使用:

http://codepen.io/asim-coder/pen/MKQWbb

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

這是一支超級酷的筆，它可以顯示并讓你玩flexbox中的幾乎所有東西。

來自flexboxfroggy.com的示例:

這將花費你10-20分鐘，在第21級你會找到問題的答案。

align-content決定了行與行之間的間距

align-items確定項目作為一個整體如何在容器內(nèi)對齊。

當(dāng)只有一行時，align-content不起作用

首先，align-items用于單行中的項目。因此，對于主軸上的單個元素行，align-items將分別對齊這些元素，并從下一行開始以新的視角開始。

現(xiàn)在，align-content不影響行中的項目，而是影響行本身。因此，align-content會嘗試將行彼此對齊，并與flex容器對齊。

檢查這把小提琴:https://jsfiddle.net/htym5zkn/8/

我也有同樣的困惑。在對上面的許多答案進(jìn)行了一些修改之后，我終于可以看出不同之處了。依我拙見，這種區(qū)別在滿足以下兩個條件的flex容器中表現(xiàn)得最為明顯:

flex容器本身具有高度限制(例如，最小高度:60雷姆),因此對于其內(nèi)容來說可能會變得太高 封裝在容器中的子項目具有不均勻的高度 條件1幫助我理解內(nèi)容相對于其父容器意味著什么。當(dāng)內(nèi)容與容器齊平時，我們將看不到來自align-content的任何定位效果。只有當(dāng)橫軸上有額外的空間時，我們才開始看到它的效果:它使內(nèi)容相對于父容器的邊界對齊。

條件2幫助我可視化對齊項目的效果:它將項目相對于彼此對齊。

下面是一個代碼示例。原材料來自Wes Bos的CSS網(wǎng)格教程(21。Flexbox與CSS網(wǎng)格)

示例HTML:

<div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">