（七）弹性盒模型 (Flexbox) 常见例子
1：属性回顾
-
flex container
flex-direction flex-wrap flex-flow justify-content align-items align-content -
flex item
order flex-grow flex-shrink flex-basis flex align-self
2：垂直居中对齐
-
不使用Flexbox
/* transform */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* margin */ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; /* table */ /* IE8推出的标准 比较早期的布局技术 */ display: table-cell; vertical-align: middle; text-align: center; /* -margin */ width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; -
使用Flexbox
display: flex; justify-content: center; align-items: center;
