flex布局

flex之前

• 文档流布局
• float + clear
• 相对定位 + 绝对定位
• display inline-block
• 负margin

flex特点

• 布局与方向无关
• 空间自动分配、自动对齐
• 适用于简单的线性布局

基本概念

基本flex

flex container的六个属性(父元素)

在下面demo的父元素里审查元素加上各种属性试试
1 flex-direction
2 flex-wrap & flex-direction
3缩写 flex-flow: [direction] [wrap]

4justify-content
5align-items
6align-content

flex item的六个属性

1 flex-grow
2 flex-shrink
3 flex-basis
4缩写 flex: [grow] [shrink] [basis]
5 order
6 align-self

demo

1手机页面布局topbar+main+tabs上下固定
2产品列表ul>li*9抛弃负margin
3PC页面布局中间自适应抛弃双飞翼
4完美居中

参考

css-tricks
flex布局-阮一峰

本博客版权归 本人和饥人谷所有，转载需说明来源