首先我們結合菜鳥教程看一下 兩者到底是用在什么地方、怎么用、有哪些屬性等問題。

菜鳥教程網址:?CSS 教程 | 菜鳥教程

下面是我參考菜鳥教程總結的內容：

1. ?align-content 屬性
?定義和用法
? ?align-content 屬性修改 flex-wrap 屬性的行為。它與 align-items 相似，但是它不對齊彈性項目，而是對齊彈性線。

*注意：必須有多行項目，此屬性才能生效！
*提示：使用 justify-content 屬性可將主軸上的項目（main-axis）水平對齊。

屬性值：

stretch 默認值。行拉伸以占據剩余空間。
center 朝著彈性容器的中央對行打包。
flex-start 朝著彈性容器的開頭對行打包。
flex-end 朝著彈性容器的結尾對行打包。
space-between 行均勻分布在彈性容器中。
space-around 行均勻分布在彈性容器中，兩端各占一半。
initial 將此屬性設置為其默認值。
inherit 從其父元素繼承此屬性。

2. align-item

定義和屬性：

align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

提示：使用每個彈性對象元素的 align-self 屬性可重寫 align-items 屬性。

屬性值：

stretch : 默認值。如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

center：位于容器的中心。彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。

flex-start :位于容器的開頭。彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

flex-end:位于容器的結尾。彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

baseline： 位于容器的基線上。如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

initial： 該屬性為它的默認值。

inherit： 從父元素繼承該屬性。

接下來將兩者的區別：

參考文檔： https://blog.csdn.net/sinat_27088253/article/details/51532992

**align-items和align-content有相同的功能，不過不同點是它是用來讓每一個單行的容器居中而不是讓整個容器居中。**

?align-content

> The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.

**align-content屬性只適用于多行的 ?flex 容器，并且當交叉軸上有多余空間使flex容器內的flex線對齊。**
**感覺這樣翻譯了之后還是略微有些抽象，不過有一個重點就是多行**

?align-items

The align-items property applies to all [flex](https://so.csdn.net/so/search?q=flex&spm=1001.2101.3001.7020) containers, and sets the
default alignment of the flex items along the cross axis of each flex
line.

*align-items屬性適用于所有的flex容器，它是用來設置每個flex元素在交叉軸上的默認對齊方式。*

總之、遇到多行就用align-content 沒錯吧哈哈哈哈

繼續加油！? 小白的苦日子~~~~??

總結

以上是生活随笔為你收集整理的align-item 与 align-content 的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。