最近我參與實施的兩個項目中，一個頁面交互複雜，而另一個相對傳統，兩個項目相比之下凸顯出了頁面佈局樣式的時間佔比不可忽視，使用了彈性佈局代碼量精簡了不少。

雖說如此，彈性佈局往往會有些潛在的問題，且改動後，要立即查看頁面也需要不少時間，因此我把項目中使用彈性佈局過程中遇到的問題稍作整理，爲大家以後使用時，可以有效規避這些麻煩。

使用場景

前端開發中，網頁佈局是很重要的一部分。之前傳統佈局方案中，基本依賴display + position + float實現，雖然能實現垂直居中，等比排布等，但有時會不夠準確並且使css語句過多。

彈性佈局最大的優點就是彈性，雖然使用百分比或者媒體查詢也可以實現響應佈局，但我認爲以下幾種情況下，flex佈局是比較好的選擇：

視口中的特定塊按照比例進行縮放
一些以基準線對齊的佈局
模塊垂直居中，水平居中
左中右彈性佈局

常用屬性

1、Flex佈局概念

flex全稱是flexbox（flexible Box），即彈性盒子。這一模塊提供更加有效的的方式制定、調整和分佈一個容器裏的項目佈局，即使他們的大小是未知或者是動態的即彈性的。

包圍在外面的即容器，內部的即爲項目，也就是說採用Flex佈局的元素就是flex容器（display：flex或inline-flex）,它的所有子元素稱爲flex項目。容器默認存在兩根軸線，一根主軸（main axis），一根交叉軸（cross axis），項目默認沿主軸排列。

2、常用屬性

flex-box(容器)和flex-item(項目)各自都有不同的屬性，通過對它們進行不同的設置來對整體佈局進行調整以達到想要的效果。主要屬性包括：

flex-direction：

默認情況下，元素排布從左至右，從上至下。但有時在實際應用中，並不按照默認情況進行排布。默認的是row（從左至右），可以設置成column（從上至下）。如果需要設置成反向，則在後面加上“-reverse”。

justify-content：

規定元素在主軸上的對齊方式。默認的是flex-start（左對齊），可以設置成flex-end（右對齊）和center（居中），也可以設置成space-between（兩端對齊，且讓剩餘空間均勻的分佈在每兩個元素之間）或是flex-around（剩餘空間均勻包裹每一個元素，每兩個元素之間的間距是邊框距盒內元素距離的二倍）。

align-items：

規定元素在交叉軸上的對齊方式。默認是stretch，即元素在豎直方向上充滿整個空間，可以設置成flex-start（起點對齊）、flex-end（終點對齊）和center（居中），除此之外，可以使用baseline對齊，即元素內部第一行文字的基線對齊。

align-content：

當flex盒內元素具有多條軸的時候可以使用。默認的是stretch，即軸線佔滿整個交叉軸。可以設置爲flex-start（與交叉軸的起點對齊），flex-end（與交叉軸的終點對齊），center（豎直居中），和space-between以及space-around。

flex：

可以將flex-grow, flex-shrink, flex-basis進行連寫。flex-grow屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。flex-shrink屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間。

瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲flex: 0 1 auto。簡寫還包括：