Flex之前我們用什么布局
主要使用
1、normal flow (正常流，也叫文檔流)
2、float + clear
3、position relative + absolute
4、display inline-block
5、負 margin
flex
一種新的布局方式---Flex 布局
1、塊級布局側(cè)重垂直方向、行內(nèi)布局側(cè)重水平方向，flex布局是與方向無關(guān)的。
2、flex 布局可以實現(xiàn)空間自動分配、自動對齊 (flexible:彈性、靈活)
3、flex 適用于簡單的線性布局，更復雜的布局要交給 grid 布局
flex 布局 代碼例子
clipboard1.png
基本概念圖
clipboard2.png
flex container 的屬性
clipboard3.png
flex-wrap
clipboard4.png
flex-flow
clipboard5.png
justify-content:space-between
clipboard6.png
align-items
clipboard7.png
align-items: stretch
clipboard8.png
align-content
clipboard9.png
flex item 的屬性
clipboard10.png
flex-shrink
clipboard11.png
clipboard12.png
align-self
clipboard13.png
手機頁面布局
clipboard14.png
1、手機頁面布局
代碼：http://js.jirengu.com/cagucuhasa/4/edit
頁面：http://js.jirengu.com/cagucuhasa/4
2、產(chǎn)品列表
代碼：http://js.jirengu.com/kifopuceqi/3/edit
頁面：http://js.jirengu.com/kifopuceqi
3、PC頁面布局
代碼：http://js.jirengu.com/riqakunuhi/2/edit
頁面：http://js.jirengu.com/riqakunuhi
4、完美居中
代碼：http://js.jirengu.com/modosutava/2/edit
頁面：http://js.jirengu.com/modosutava
