Flex之前我们用什么布局
主要使用
1、normal flow (正常流，也叫文档流)
2、float + clear
3、position relative + absolute
4、display inline-block
5、负 margin
flex
一种新的布局方式---Flex 布局
1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
2、flex 布局可以实现空间自动分配、自动对齐 (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、产品列表
代码：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
