最近在学习flex-box的布局，也发现这个布局挺好用，在整个页面的响应式布局方面挺方便。不过在实践过程的时候，在几个属性上面总是有那么点恶心。下面整理了3个布局。
1, Flex布局第一种运用，响应式栅格化布局
Html代码
<div class="demo-wrap">
<div class="demo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
css代码
.demo-wrap{
border: 2px solid #ddd;
background: #f5f5f5;
padding: 6px;
}
.demo{
width: 100%;
/*flex布局（作用于容器）*/
display: flex;
/*两端对齐（作用于容器）*/
justify-content: space-around;
/*侧轴方向对齐方式（作用于容器）*/
align-items: flex-end;
/*换行（作用于容器）*/
flex-wrap: wrap;
}
.demo .item{
width: 300px;
height: 50px;
background: #444;
margin-bottom: 20px;
}
核心就是最大父容器让宽度auto,item父容器100%的设置，再用上一个换行wrap,就能轻松实现响应式布局
2，左右固定中间自适应宽度底部对齐布局
html代码
<div class="demo">
<div class="left">左边固定宽度为100px，这里设置了高度为auto</div>
<div class="center">中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px</div>
<div class="right">右边固定宽度为150px，这里设置了高度为auto</div>
</div>
css代码
.demo{
/*flex布局（作用于容器）*/
display: flex;
/*项目拉伸对齐，也就是所左边的高度为拉伸到和右边底部对齐*/
align-items: flex-end;
}
.demo .left{
/*左边固定宽度，必须设置其最小宽度和最大宽度*/
width: 100px;
min-width: 100px;
max-width: 100px;
/*高度自由分配*/
height: auto;
background: #B4D3F7;
/*空白区域分配比例为0（作用于项目）*/
flex-grow: 0;
}
.demo .center{
margin: 0 10px;
width: auto;
height: 200px;
background: #F7E8B4;
/*空白区域分配比例为1（作用于项目）
左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
左边成固定的宽度，右边为自适应宽度*/
flex-grow: 1;
}
.demo .right{
/*右边固定宽度，必须设置其最小宽度和最大宽度*/
width: 150px;
min-width: 150px;
max-width: 150px;
/*高度自由分配*/
height: auto;
background: #CBFFD2;
/*空白区域分配比例为0（作用于项目）*/
flex-grow: 0;
}
这是一种类似于圣杯的简易布局效果。视觉效果保证的核心的有max-width作保证。布局的核心是两侧固定width并且flex-grow为0，中间auto并且flex-grow为1
3，悬挂式布局
html代码
<div class="Media">
<img class="Media-figure" src="" alt="">
<p class="Media-body">...</p>
</div>
css代码
.Media { display: flex; align-items: flex-start;}
.Media-figure { margin-right: 1em;}
.Media-body { flex: 1;}
