flexbox
简介：
弹性布局(flexible box)
.box { display:flex; } //声明为flex布局
.box { display:inline-flex }//行内元素声明为flex
.box { display:flex; display:-webkit-flex; }//safafi
注意：设置了flex布局之后，float/clear/vertical-align无效
图形解析
外面的为容器container,里面的为项目flex item。
容器的属性
-
flex-direciton//决定主轴方向
flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap//决定换行方式
flex-wrap: nowrap | wrap | wrap-reverse;
不换行/换行/换行，第一行放在下方 - flex-flow//dircection和wrap的缩写
默认值为row nowrap -
justify-content//主轴对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;```
-
align-items//对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;```
-
align-content//多根轴线的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;```
项目属性
-
order//数值越大越靠前
-
flex-grow:<number>//放大倍数
- flex-shrink//定义缩小倍数
- flex-basis:<length>//项目长度
- flex前三个的所写，默认为0 1 auto
auto(1 1 auto)/none(0 0 auto) - align-self//独立出来的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;```
