整理flex布局的使用笔记

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;}