在flex之前，主要使用五種混合布局：①normal float，②float + clear，③position + absolute/relative，④display:inline-block，⑤正負margin。

flex特點：①與方向無關(塊級布局側重垂直方向，行內布局側重水平方向)。②空間自動分配，自動對齊(flexible:彈性/靈活)。③適用于簡單線性布局(復雜布局用grid)。

概念圖

flex container

flex-direcrion：決定內容是水平排列或豎直排列(4種)，justify-content(5種)，align-items(4種)，align-content(3種)

grow示例

????????????????????????????????????????????????????????布局原則

先搞清楚需求在寫代碼

1、浮動布局

①要浮動的元素全部加float：left(right)，其父元素加clearfix。( .clearfix::after{content:''; display:block; clear:both;} )

②固定寬度的塊元素居中：左右margin為auto

③單行文字居中：line-height高度等于邊框高度

④在PC端網頁中，可以用min-width來控制頁面寬度，頁面小于相應寬度時用滾動條查看，不會因頁面過小而導致頁面錯亂。

2、float做平均布局

父類div用了margin后，最左和最右兩邊都會出現間隔導致計劃一行放4個div，最終只能放三個div。解決方法：再用一個div包住全部小div，左右兩邊用margin-left和margin-right的負值來布局。

3、用計算屬性calc

calc（?% - ?px）。假如要布置4個div，4個div有8px間隔，最左和最右兩邊沒有間隔，則可以寫成calc(25% - 8px)

4、手機布局

①手機布局不要定死寬度，寬高盡量使用auto。

②手機端圖片盡量使用background(bug最少)，使用img會導致圖片變形。（一定要固定比例的圖片，google搜素：固定比例div）