CSS3—弹性盒子flexbox

伸缩布局盒模型和术语

• 可以以任何伸缩方向（向左、向右、向下，甚至是向上！）配置
• 可以在样式层（也就是视觉顺序可以跟源码、语音顺序无关）调换、重排显示顺序
• 可以沿着单一（主）轴线性配置或是沿着第二（侧）轴折行
• 可以因为可用空间的存在扩展内容的尺寸
• 可以沿着容器或彼此对齐
• 可以在保持侧轴长度不变之下动态折叠或反折叠

伸缩容器

容器属性

以下6个属性设置在容器上

伸缩流的方向 
flex-direction: 
row | row-reverse | column | column-reverse


伸缩容器里是单行还是多行显示
flex-wrap: 
nowrap | wrap | wrap-reverse


以上两项属性的合并写法
flex-flow: flex-direction flex-wrap;
默认值为“row nowrap”

沿着主轴线的对齐方式
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: <integer>出现的顺序


flex-grow: <number> 扩展能力(占用空间的比例)

flex-shrink: <number> 收缩的能力
flex-basis: <length> | auto (默认值为： auto) 剩余的空间按比率进行伸缩

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self: auto | flex-start | flex-end | center | baseline | stretch 对齐方式

.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}