Flexbox弹性布局

.nav {
  overflow: hidden;
  background-color: #DE7C3C;
  padding: 10px;
  display: -webkit-flex;
}
.item {
  color: #FDDFA7;
  padding: 0 5px;
  text-align: center;
  flex: 1;
}

Flex混合划分

另外有一个常见的问题：不定宽高的水平垂直居中
css3的解决方式是：

.myoff-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  webkit-transform: translate(-50%, -50%);
}

flexbox版：

.parent {
  justify-content: center;  //子元素水平居中
  align-items: center;       //子元素垂直居中
  display: -webkit-flex;
}

Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。

高清图片