前端布局
传统解决方案：盒装模型+ display + position + float;
2009 w3c提出新的解决方案--Flex布局
Flex (Flexible Box 弹性布局)--- 所有浏览器支持
.box { display:-webkit-flex; // safari, webkit浏览器 display: flex; // 容器 }
box { display:inline-flex; // 行内元素 }
设置为flex布局后， 子元素的float，clear，vertical-align属性将失效
属性说明
容器属性
- flex-direction: row | row-reverse | column | comlumn-reverse; // 主轴方向
- flex-wrap: nowrap | wrap | wrap-reverse; // 换行
- flex-flow: < flex-direction> || // flex-direction + flex-wrap, 使用|| 分隔
- justify-content: flex-start | flex-end | center | space-between | space-around; // 对齐方式
- align-items: flex-start | flex-end | center | baseline | stretch; // 项目在交叉轴上如何对齐
- align-content: flex-start | flex-end | center | space-between | space-around | stretch
项目属性
- order: ; // default 0, 项目的排列顺序
- flex-grow: ; // default 0， 项目放大的比例
- flex-shrink: ; // defalut 1, 如果所有项目的flex-shrink属性都为1，空间不足时，都将等比例缩小，如果其中一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
- flex-basis:
- flex: none | [ || flex-basis]
- align-self: auto | flex-start | flex-end | center | baseline | stretch // 覆盖aligin-items
