CSS彈性布局（Flexbox）是一種布局方式，可以修正傳統(tǒng)布局方法的一些不足之處。Flexbox 彈性盒子模型是通過(guò)flex容器和flex項(xiàng)目之間相互作用的一種方式來(lái)進(jìn)行頁(yè)面布局的技術(shù)。CSS彈性盒子布局使得UI的實(shí)現(xiàn)更快、更方便、更可靠。在CSS彈性盒子布局中，元素被指定為flex-items，它們位于flex container中，并采用Flexbox算法。

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

首先，.container是flex容器的容器。通過(guò)對(duì)這個(gè)容器的CSS設(shè)置，你可以修正網(wǎng)格布局中的一些問(wèn)題，例如，它的子項(xiàng)目可以不依賴于父項(xiàng)目的實(shí)際高度、寬度（雖然它們可以限制在一定大小,即flex容器寬度） 接下來(lái)，我們來(lái)照看一下flex-direction。這告訴瀏覽器容器中哪個(gè)方向是軸線和主軸線（flex-direction: column或flex-direction: row）。align-items和justify-content屬性描述了如何在軸線和主軸線上排列項(xiàng)目，或者是如何對(duì)齊項(xiàng)目。彈性盒容器會(huì)根據(jù)這些屬性進(jìn)行調(diào)整： align-items 屬性決定了軸線上項(xiàng)目如何垂直對(duì)齊，而 justify-content 屬性則決定了軸線上項(xiàng)目如何水平對(duì)齊和給予空間。

.box1 {
order: 1; 
flex-grow: 1; 
flex-basis: 20%; 
}
.box2 {
order: 2; 
flex-grow: 2; 
flex-basis: 50%;
}

最后，我們來(lái)看一下每個(gè)flex項(xiàng)容器的屬性。order屬性定義了元素在flex容器中的順序：允許反轉(zhuǎn)該順序，從而允許元素向后或向前移動(dòng)（低版本瀏覽器不支持）。flex-grow屬性規(guī)定了項(xiàng)的伸展比例和剩余空間之間的分配。最后，flex-basis屬性定義了元素在軸線沿著主軸方向上的初始大小。