flex布局

摘自： http://www.cnblogs.com/lynnmn/p/6262941.html

之前的随笔从阮一峰老师那里学到了flex的基本用法及作用，现在来把flex具体运用到实例中，看看flex的弹性布局效果。

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

在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现
HTML代码：

<div class="demo">
  <div class="inner">
    <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
CSS代码：
.demo{
  width: 500px;
  height: 300px;
  border: 1px solid purple;
  display: flex;                /*设置为flex布局*/
  justify-content: center;   /*水平居中*/
  align-items: center;     /*垂直居中*/
.inner{
  width: 160px;
  height: 160px;
  font-size: 26px;
  border: 1px solid red;
效果如图：
2. 用flex布局制作导航栏
以前在写导航栏的时候，总是用float或者display：inline-block实现，但是这两种方法都会有各种问题，比如浮动会影响父元素以及兄弟元素的样式，需要清除浮动

现在用flex会很方便，并且是弹性布局

HTML代码：
 <li>音乐</li>
 <li>影视</li>
 <li>旅游</li>
CSS代码：
  display: flex;         
  flex: 1;
  text-align: center;
  line-height: 100px;
效果如图所示：
  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>
(1) 等分布局：