默认子元素按行排列
Flexbox 布局是一维布局方式，要么按行排列，要么按列排列。
align-items 控制交叉轴， justify-content 控制主轴,始终不变。
flex-basis是用来设置 main size 的。使用 flex-basis，可以同时管理行模式下的宽度和列模式下的高度。
此时 width 失效，但是可以用 min-width 限制
在列模式下，设置高度
flex 容器在有剩余空间的时候，子元素占据剩余空间的占比。适合一些浮动的布局。
超过边界自动换行
在以前面对这样的效果，最好的解决方案是能过HTML的结构来做一定的处理。比如：
<div class="banner"><div class="container"></div>
</div>
比如我们的布局效果是960px的水平居中效果：
.container {width: 960px
marign-left: auto
margin-right: auto
}
.banner .container {
width: 100%
}
但这种方法虽然能解决我们布局中在某个区域中实现全屏效果。但有的时候，这种方法并不能解决问题。不过，值得庆幸的是，有另外的方案可以在限宽的容器中实现全屏效果。
.u-containProse {max-width: 40em
margin-left: auto
margin-right: auto
}
.u-release {
margin-left: calc(-50vw + 50%)
margin-right: calc(-50vw + 50%)
}
这是一个较新的方案，不过有一个缺点。虽然这个方法能在限定宽度容器中实现全屏的效果，但是在一些平台上会出现一个水平滚动条，这是让人无法接受的。除非你在body元素上设置overflow-x:hidden。
