1、flex布局

案例一：

案例二：

保證不至於縮放得太小或太大

案例三：flex的值不一定要寫成幾份，可以寫成固定值

案例四：

豎著3等分（父容器按照高度3等分）

!!案例 -----用flex布局寫攜程網（發現攜程網是伸縮布局：根據屏幕自適應）

　　flex: 2 意義是啥 （剩余寬度裏占比2等份）

flex布局：1、父元素要定義為display：flex ，

　　　　2、直接子元素布局為flex： n

　　　　3、flex：n 的意思：先用父元素的寬度減去沒有設置屬性flex的子元素的寬度，把所有屬性為flex子元素之和作為剩余寬度要分成的份數，最後屬性為flex元素的寬度即為占比數。

　　　　4、若父元素display：flex後 ，那其子元素設置的float都不起作用了，定位還是有用的，但是一般不會這樣用

2、justify-content（水平對齊）屬性用法作用如下：

3、align-items垂直對齊：適用於單行！

4、flex-wrap屬性

5、align-content

6、order

每一份子項目默認值是0

css學習_css3伸縮布局 flex布局