CSS flexbox 布局
新的
flexbox 布局模式被用来重新定义 CSS 中的布局方式。目前只能在支持 flexbox 的 Chrome 等浏览器中运行，基于最新的标准。
flexbox 布局
使用 flexbox 你还可以做的更多，这里只是一些让你了解概念的例子。
使用 flexbox 的简单布局
.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}
<div class="container">
<div class="flex-column">
<section> - 1
<section> - 2
flexbox 很容易使用！
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。弹性盒子 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;
}
<div class="container">
<div class="initial">
空间足够的时候，我的宽度是 200px，如果空间不足，我会变窄到 100px，但不会再窄了。
<div class="none">
无论窗口如何变化，我的宽度一直是 200px。
<div class="flex1">
我会占满剩余宽度的 1/3。
<div class="flex2">
我会占满剩余宽度的 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">
<div class="none">
CSS 里总算是有了一种简单的垂直居中布局的方法了！