display：flex；布局

菜鸟教程display：flex；布局
例子原文
菜鸟教程讲解的已经很详细了，（点击上方链接），这里总结一些布局例子；

flex:flex-grow flex-shrink flex-basis;
flex: 0 0 33.333333%;
flex-grow 属性用于设置或检索弹性盒子的扩展比率。属性值number 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis 属性用于设置或检索弹性盒伸缩基准值。属性值number 一个长度单位或者一个百分比，规定灵活项目的初始长度。

例子一：垂直居中布局

	display: flex;
	justify-content: center;
	align-items: center;

例子1-1 div根据网页居中

<div class="box1"></div>
			<div class="box2"></div>		
		<div class="box3"></div>

body{
				width:100%;
				height: 100%;
				background: red;
				display: flex;
				justify-content:center;
         	    position: absolute;
          	    align-items:center;
			}
			.box2{
				width:200px;
				height:200px;
				background:yellow;
				justify-content:center;
			}
			.box1{
				background: pink;
				height:20px;
				position: fixed;
				top:0px;
				width:100%;
			}.box3{
				background: pink;
				height:20px;
				position: fixed;
				bottom:0px;
				width:100%;
			}

例二：水平横向平分

display: flex;(父元素)
flex:1;（子元素等分空间）

HTML代码：

<ul>
 <li>音乐</li>
 <li>影视</li>
 <li>旅游</li>
</ul>
CSS代码：

ul{
  display: flex;         
}
li{
  flex: 1;
  text-align: center;
  line-height: 100px;
}

我们只要在HTML代码里面多加两个li元素，导航便弹性变化

不需要改变css代码，即可在导航栏中增加项目

3. 有时候需要做成左图右文字的样式，如下图所示：

此时用flex会很方便

HTML代码：

<div class="demo">
   <div class="left"></div>
   <div class="right">
      <p>Iphone7 PLUS XXXXXXXXXX</p>
      <span>总人数99</span>
      <span>剩余人数33</span>
      <div class="btn">立即参与</div>
   </div>
</div>
CSS代码：

.demo{
  display: flex;                /*设置为flex布局*/
  justify-content: space-around;
}
.demo > div{
  flex: none;
}
.left{
  width: 200px;
  height: 200px;
  background: #d4cdcd;
}
.right{
  width: 380px;
  height: 200px;
}

甚至有多列布局，

HTML代码：

<div class="demo">
   <div class="left"></div>
   <div class="center">
      <p>description</p>
      <p>description</p>
      <p>description</p>
      <span>description</span>
   </div>
   <div class="btn">确认</div>
   <div class="btn">取消</div>
</div>

CSS代码：

.demo{
  width: 600px;
  height: 150px;
  border: 1px solid #b7b2b7;
  margin: 30px auto;
  padding-top: 17px;
  display: flex;                /*设置为flex布局*/
  justify-content: space-around;
}
.demo > div{
  flex: none;
}

4. 固定百分比布局：

HTML代码：

<div class="demo">
   <div class="item item1"></div>
   <div class="item item2"></div>
   <div class="item item3"></div>
   <div class="item item4"></div>
</div>

(1) 等分布局：

CSS代码：

.demo{
  display: flex;             
}
.item{
  flex: 1;
}

（2）某一个固定

CSS代码：

.demo{
  display: flex;    
}
.item{
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}

（3）某两个固定

CSS代码：

.demo{
  display: flex;           
}
.item{
  flex: 1;
}
.item1{
  flex: 0 0 10%;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}

（4）三个固定

CSS代码：

.demo{
  display: flex;           
}
.item{
  flex: 1;
}
.item1{
  flex: 0 0 10%;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}

5. 圣杯布局，如图所示
   

HTML代码：

<div class="demo">
   <div class="header">头部</div>
   <div class="body">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
   </div>
   <div class="footer">底部</div>
</div>
CSS代码：

.demo{
  display: flex;
  flex-direction: column;            
}
.demo div{
  flex: 1;
}
.body{
  display: flex;  
} 
.header,.footer,.left,.right{
  flex: 0 0 20%!important;
}

6. 输入框布局，有时需要在输入框的前部添加提示，或者后部添加按钮，如图所示：
   

HTML代码：

<div class="demo">
   <span class="tip"></span>
   <input type="text" name="" />
   <button>search</button>
</div>
CSS代码：

.demo{
  display: flex;
}
input{
  flex:1;
}

7. 底部footer固定在底部，但是不是fixed定位

页面会经常用到固定的底栏，但是当页面内容过少时，footer会到页面中间，下面用flex来解决

HTML代码：

<div class="demo">
   <div class="main">这是主要内容</div>
   <div class="footer">这是底部</div>
</div>
CSS代码：

.demo{
    display: flex;
    flex-direction: column;
}
.main{
    flex: 1;
}
.footer{
    width: 100%;
    height: 120px;
}

8. 流式布局 ，如下如所示：

HTML代码如下：

<div class="demo">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>
CSS代码：

.demo{
    width: 258px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.item{
    flex: 0 0 33.333333%;
    height: 80px;
    box-sizing: border-box;
}