設置容器，用(yòng)于統一管理(lǐ)容器内項目布局，也(yě)就是管理(lǐ)項目的排列方式和(hé)對(duì)齊方式。
flex-direction 屬性
通過設置坐(zuò)标軸，來(lái)設置項目排列方向。
.container{
flex-direction: row（默認值） | row-reverse | column | column-reverse
}
row（默認值）：主軸橫向，方向爲從(cóng)左指向右。項目沿主軸排列，從(cóng)左到(dào)右排列。
row-reverse：row的反方向。主軸橫向，方向爲從(cóng)右指向左。項目沿主軸排列，從(cóng)右到(dào)左排列。
column：主軸縱向，方向從(cóng)上(shàng)指向下(xià)。項目沿主軸排列，從(cóng)上(shàng)到(dào)下(xià)排列。
column-reverse：column的反方向。主軸縱向，方向從(cóng)下(xià)指向上(shàng)。項目沿主軸排列，從(cóng)下(xià)到(dào)上(shàng)排列。
flex-wrap 屬性
設置是否允許項目多行排列，以及多行排列時(shí)換行的方向。
.container{
flex-wrap: nowrap（默認值） | wrap | wrap-reverse
}
nowrap（默認值）：不換行。如果單行内容過多，則溢出容器。
wrap：容器單行容不下(xià)所有項目時(shí)，換行排列。
wrap-reverse：容器單行容不下(xià)所有項目時(shí)，換行排列。換行方向爲wrap時(shí)的反方向。
justify-content 屬性
設置項目在主軸方向上(shàng)對(duì)齊方式，以及分配項目之間及其周圍多餘的空(kōng)間。
.container{
justify-content: flex-start（默認值） | flex-end | center | space-between | space-around| space-evenly
}
flex-start（默認值）：項目對(duì)齊主軸起點，項目間不留空(kōng)隙。
center：項目在主軸上(shàng)居中排列，項目間不留空(kōng)隙。主軸上(shàng)第一個項目離主軸起點距離等于最後一個項目離主軸終點距離。
flex-end：項目對(duì)齊主軸終點，項目間不留空(kōng)隙。
space-between：項目間間距相等，第一個項目離主軸起點和(hé)最後一個項目離主軸終點距離爲0。
space-around：與space-between相似。不同點爲，第一個項目離主軸起點和(hé)最後一個項目離主軸終點距離爲中間項目間間距的一半。
space-evenly：項目間間距、第一個項目離主軸起點和(hé)最後一個項目離主軸終點距離等于項目間間距。
align-items 屬性
設置項目在行中的對(duì)齊方式。
.container{
align-items:stretch（默認值） | flex-start | center | flex-end | baseline
}
stretch（默認值）：項目拉伸至填滿行高(gāo)。
flex-start：項目頂部與行起點對(duì)齊。
center：項目在行中居中對(duì)齊。
flex-end：項目底部與行終點對(duì)齊。
baseline：項目的第一行文(wén)字的基線對(duì)齊。
align-content 屬性
多行排列時(shí)，設置行在交叉軸方向上(shàng)的對(duì)齊方式，以及分配行之間及其周圍多餘的空(kōng)間。
.container{
align-content: stretch（默認值） | flex-start | center | flex-end | space-between |space-around | space-evenly
}
stretch（默認值）：當未設置項目尺寸，将各行中的項目拉伸至填滿交叉軸。當設置了(le)項目尺寸，項目尺寸不變，項目行拉伸至填滿交叉軸。
flex-start：首行在交叉軸起點開(kāi)始排列，行間不留間距。
center：行在交叉軸中點排列，行間不留間距，首行離交叉軸起點和(hé)尾行離交叉軸終點距離相等。
flex-end：尾行在交叉軸終點開(kāi)始排列，行間不留間距。
space-between：行與行間距相等，首行離交叉軸起點和(hé)尾行離交叉軸終點距離爲0。
space-around：行與行間距相等，首行離交叉軸起點和(hé)尾行離交叉軸終點距離爲行與行間間距的一半。
space-evenly：行間間距、以及首行離交叉軸起點和(hé)尾行離交叉軸終點距離相等。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發