flex布局
flex之前
- 文档流布局
- float + clear
- 相对定位 + 绝对定位
- display inline-block
- 负margin
flex特点
- 布局与方向无关
- 空间自动分配、自动对齐
- 适用于简单的线性布局
基本概念
flex container的六个属性(父元素)
在下面demo的父元素里审查元素加上各种属性试试
1flex-direction
2flex-wrap & flex-direction
3缩写flex-flow: [direction] [wrap]
4justify-content
5align-items
6align-content
flex item的六个属性
1flex-grow
2flex-shrink
3flex-basis
4缩写flex: [grow] [shrink] [basis]
5order
6align-self
demo
1手机页面布局topbar+main+tabs上下固定
2产品列表ul>li*9抛弃负margin
3PC页面布局中间自适应抛弃双飞翼
4完美居中