flex 布局

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