flex布局

【设为 Flex 布局以后，子元素的 float、 clear和 vertical-align属性将失效】

一、基本属性

1.flex-direction决定了项目的排列方式

2.flex-wrap决定了项目排列满屏，是否换行

3.justify-content 项目在主轴上的对齐方式

4.align-items 决定了项目在交叉轴上的对齐方式

二、常用布局

1.flex设置元素垂直居中对齐

  display: flex;                /*设置为flex布局*/
  justify-content: center;   /*主轴上的对齐居中*/
  align-items: center;     /*交叉轴居中*/

2.用flex布局制作导航栏

用float或者display：inline-block实现，会影响父元素以及兄弟元素的样式，需要清除浮动
现在用flex会很方便，并且是弹性布局

<ul>
 <li>音乐</li>
 <li>影视</li>
 <li>旅游</li>
</ul>

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

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

3.有时候需要做成左图右文字的样式

<div class="demo">
   <div class="left"></div>
   <div class="right"></div>
</div>

.demo{
  display: flex;   
  justify-content: space-around;
}
.demo > div{
  flex: none;
}

或者多列布局：

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

.demo{
  display: flex;  
  justify-content: space-around;
}
.demo > div{
  flex: none;
}

4.固定百分比布局

<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）等分布局

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

（2）某一个固定

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

flex: 0 0 50%;：只是意味着“占二分之一”，而不再与其他元素成比例地“增长”或“缩小”

这是一个速记属性，设置flex-grow，flex-shrink和flex-basis
flex-grow：弹性项目的弹性增长因子。
flex-shrink：指定弹性项目的弹性收缩系数。
flex-basis:指定弹性项目的初始主要尺寸

（3）多个固定

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

5.圣杯布局

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

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

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

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

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

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

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

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

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

8.流式布局

<div class="demo">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>

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

9.双飞翼布局

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度