CSS基礎(chǔ)之Flex布局

Flex布局是CSS3的新布局方式，用于解決傳統(tǒng)布局方式的缺陷。

傳統(tǒng)布局方式是基于盒模型設(shè)計(jì)的，固定寬度和高度會導(dǎo)致頁面縮放時出現(xiàn)錯位和重疊現(xiàn)象，影響用戶體驗(yàn)。而Flex布局是基于彈性容器和彈性元素實(shí)現(xiàn)的，不需要指定固定寬度和高度，能夠自適應(yīng)頁面大小。

.container{
display: flex; /*將容器設(shè)置為flex布局*/
flex-direction: row; /*主軸方向?yàn)樗椒较?/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.item{
flex: 1; /*等分剩余空間*/
text-align: center; /*文本居中*/
margin: 10px; /*設(shè)置間距*/
}

以上代碼實(shí)現(xiàn)了一個簡單的Flex布局，將.container設(shè)置為flex布局，flex-direction屬性設(shè)置主軸的方向?yàn)樗椒较颉ustify-content和align-items屬性分別用于水平和垂直方向的居中對齊。

在彈性容器中，彈性元素的布局屬性將影響彈性元素的排列方式。flex屬性控制彈性元素的縮放比例，可以將剩余空間等分或按比例分配。

總結(jié)：Flex布局是一種彈性布局方式，具有自適應(yīng)、自由度高、布局方式多樣化等優(yōu)點(diǎn)，能夠極大地提高網(wǎng)頁的適應(yīng)性和視覺效果。