CSS中的Flex布局是一種強(qiáng)大的布局方式，它可以幫助我們輕松地創(chuàng)建現(xiàn)代網(wǎng)頁的布局。Flex布局基于一個(gè)彈性容器和彈性元素的概念，簡化了布局和對元素的對齊控制。

在Flex布局中，我們需要聲明一個(gè)彈性容器，讓它成為父元素，包含諸如flex-direction、justify-content、align-items等屬性。這些屬性可以用來指定彈性元素沿主軸和交叉軸方向的位置和排序。

.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

在上面的代碼中，我們指定一個(gè)Flex容器，并將其flex-direction屬性設(shè)置為row，意味著它的彈性項(xiàng)將沿著水平軸依次排列。justify-content屬性指定如何將所有彈性項(xiàng)沿主軸方向?qū)R，而align-items屬性指定如何在交叉軸方向上對齊所有彈性項(xiàng)。

彈性項(xiàng)應(yīng)該是容器中每個(gè)子元素，我們可以通過設(shè)置彈性項(xiàng)目的flex屬性來指定它在容器中的相對大小。該屬性與flex-grow、flex-shrink和flex-basis值相關(guān)聯(lián)。

.child {
flex: 1;
}

在上面的代碼中，我們設(shè)置了一個(gè)名為child的彈性項(xiàng)的flex屬性為1，這意味著它將占據(jù)所有的剩余空間。總體來說，F(xiàn)lex布局是一種強(qiáng)大的工具，讓我們能夠輕松地布局我們的網(wǎng)頁并控制元素的位置。