简介：2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex布局是什么？
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
Flex 学习之路开始
1:我经常遇到，垂直居中的布局问题。以前我都是用盒子模型做的，但总是出现各种各样的问题。浏览器的兼容性特别让人心碎。
这次我都是在我自己开发中遇到的问题来学习flex。我需要它给我解决问题，所以贴出来的代码 都是我在项目中经常遇到。
html 代码
<div class='first'>
<div class='box'>
<div class='item'>flex</div>
</div>
<div class='box'>
<div class='item'>flex</div>
</div>
<div class='box'>
<div class='item'>flex</div>
</div>
<div class='box'>
<div class='item'>flex</div>
</div>
</div>
css代码
.first{
width:500px;
display:flex;
border:1px solid #000;
justify-content:center;
}
.box{
width:100px;
height:100px;
border:1px solid #000;
display:flex;
justify-content: center;
align-items: center;
margin-left:10px;
}
.box:first-child{
margin-left:0px;
}
.item{
color:red;
}
效果展示
效果展示源码链接：https://jsfiddle.net/Fannie/wwd96oez/1/
解析
display:flex; 这是flex 的容器 justify-content: center; 定义了项目在主轴上的对齐方式。 align-items: center; 属性定义项目在交叉轴上如何对齐。
参考链接：阮一峰的网络日志 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
就是如此简单哦！