flex布局

在flex布局之前，我们是如何布局的。
主要使用：

• normal flow
• float + clear
• position relative +absolute
• display inline-block（比如导航条）
• 负margin

新的布局方式－flex布局

１．块级元素侧重垂直方向，行内元素侧重水平方向，flex布局是与方向无关
２．flex布局可以实现空间自动分配，自动对齐
３．flex适用于简单的线性布局，更复杂的布局要交给grid布局。

flex示意图

flex container的属性

• flex-direction 方向
• flex-wrap方向
• flex-flow　上边两个简写
• justify-content 主轴方向的对齐方式
• align-items 侧轴对齐方式
• align-content　多行/列内容对齐方式（用的很少）

flex item的属性

• flex-grow 　增长比例（空间过多时）
• flex-shrink　收缩比例（空间不够时）
• flex-basis　默认大小（一般不用）
• flex　上面三个的所学
• order　顺序（代替双飞翼）
• align-self　自身的对齐方式

使用flex布局

１．手机页面布局（topbar+main+tabs）
demo:http://js.jirengu.com/mudovavola/1/edit
２．产品列表（ul>li*9)
demo:http://js.jirengu.com/zumidiwamu/1/edit?html,output
３．PC页面布局
demo:http://js.jirengu.com/yabocosatu/1/edit?output
４．完美居中
demo:http://js.jirengu.com/gukipegiro/1/edit