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