Flexbox

使用 Flexbox 的牛逼布局

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

空间足够的时候，我的宽度是200px，如果空间不足，我会变窄到100px，但不会再窄了。无论窗口如何变化，我的宽度一直是200px。我会占满剩余宽度的2/3。

使用 Flexbox 的居中布局

.vertical-container {

  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

<div class="vertical-container">

CSS里总算是有了一种简单的垂直居中布局的方法了！

<div>