Flex 布局笔记-布局应用

最近在学习flex-box的布局，也发现这个布局挺好用，在整个页面的响应式布局方面挺方便。不过在实践过程的时候，在几个属性上面总是有那么点恶心。下面整理了3个布局。

---

1, Flex布局第一种运用，响应式栅格化布局

Html代码

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代码

  
左边固定宽度为100px，这里设置了高度为auto
  
中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px
  
右边固定宽度为150px，这里设置了高度为auto

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代码

 
   
  
...

css代码

.Media { display: flex; align-items: flex-start;}
.Media-figure { margin-right: 1em;}
.Media-body { flex: 1;}