.jpg)
flexbox中align-items控制交叉軸對齊，justify-content控制主軸對齊。1. justify-content常用flex-start、center、flex-end、space-between、space-around調(diào)整主軸方向排列；2. align-items常見取值為stretch、flex-start、center、flex-end、baseline用于交叉軸對齊；3. 同時設(shè)置兩者可實(shí)現(xiàn)水平垂直居中等復(fù)雜布局效果。
在使用Flexbox布局時，align-items 和 justify-content 是兩個非常常用的屬性，它們都用于控制容器內(nèi)子元素的對齊方式，但作用的方向不同。簡單來說：
- justify-content 控制的是主軸（main axis）上的對齊方式
- align-items 控制的是交叉軸（cross axis）上的對齊方式
理解主軸和交叉軸是關(guān)鍵。Flex容器默認(rèn)的主軸是水平方向（從左到右），交叉軸則是垂直方向（從上到下）。當(dāng)然，通過設(shè)置 flex-direction 可以改變主軸方向，進(jìn)而影響這兩個屬性的實(shí)際表現(xiàn)。
主軸對齊用 justify-content
當(dāng)你想調(diào)整子元素在水平方向的排列方式，比如讓它們靠左、居中、靠右，或者分配空間，就該使用 justify-content。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
常用取值包括：
- flex-start（默認(rèn)）：靠主軸起點(diǎn)對齊
- center：主軸方向居中
- flex-end：靠主軸終點(diǎn)對齊
- space-between：兩端對齊，中間間距平均分布
- space-around：每個項目周圍有相等的空間
舉個例子，如果你想做一個水平居中的導(dǎo)航欄，可以這樣寫：
.nav { display: flex; justify-content: center; }
這時候所有的導(dǎo)航項就會在容器中水平居中顯示。
交叉軸對齊用 align-items
如果你希望調(diào)整子元素在垂直方向的對齊方式，比如讓它們上下居中、頂部對齊或底部對齊，那就用 align-items。
常見取值如下：
- stretch（默認(rèn)）：拉伸填滿容器
- flex-start：交叉軸起點(diǎn)對齊
- center：交叉軸居中
- flex-end：交叉軸終點(diǎn)對齊
- baseline：按基線對齊（適用于文字）
比如你想讓一個按鈕內(nèi)部的圖標(biāo)和文字在垂直方向上居中，可以這樣設(shè)置：
.button { display: flex; align-items: center; }
這樣無論圖標(biāo)和文字的高度如何變化，都能保持垂直居中。
有時候需要一起用
很多時候我們會同時設(shè)置這兩個屬性，來達(dá)到更精細(xì)的對齊效果。比如一個卡片布局，希望內(nèi)容在水平和垂直方向都居中：
.card { display: flex; justify-content: center; align-items: center; }
這樣就可以實(shí)現(xiàn)“完全居中”的效果了。
需要注意的是，如果容器的高度不確定或者子元素本身有高度差異，align-items 的行為可能會略有不同，這時候可以結(jié)合 align-self 單獨(dú)調(diào)整某個子元素。
總的來說，記住一句話就能區(qū)分清楚：
justify 是主軸，align 是交叉軸。
基本上就這些。只要搞清楚主軸方向，這兩個屬性的使用就不會混淆了。
以上就是css中align-items和justify-content在<a
.png)
