flex布局

flex布局我最开始是看阮一峰的系列文章
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
但是看了就忘了，到用的时候再去看时间又来不及，只好用浮动，今天记录一下
以后我就可以直接粘贴过去用了。好记性不如烂笔头。
1、水平——均分布局 （还是写兼容性写法，因为我在一个手机模拟器上就不兼容）

<ul>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
</ul>

ul{
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
}
li{
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
}

2、左右两端对齐，中间均分

左右两端对齐，中间均分.png

<ul>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
</ul>

ul{
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
     justify-content:space-between;
}
li{
    width: 300px;
    height: 200px;
    background-color: black;
    color: white;
}

3、其中一个撑满剩余空间

其中一个撑满剩余空间.png

<ul>
    <li class="flex-none">第一</li>
    <li class="flex-none">第二</li>
    <li class="flex-one1">第三</li>
</ul>

ul{
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
     width: 1000px;
    }
.flex-none{
    -webkit-box-flex: none;
    -webkit-flex: none;
    flex: none;
}
.flex-one1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

4、子元素水平居中排列，超出换行显示

子元素水平居中排列，超出换行显示.png

<ul class="hot-sign-ul">
    <li class="one-li">航拍1</li>
    <li class="one-li">航拍2</li>
    <li class="one-li">航拍3</li>
</ul>

.hot-sign-ul{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    -o-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    padding-top: .24rem;
    padding-bottom: 1.06rem;
}
.one-li{
    -webkit-box-flex: none;
    -webkit-flex: none;
    flex: none;
    width: auto;
    margin: .39rem .08rem 0;
    border-radius: .52rem;
    padding: .16rem .36rem;
    background-color: rgb(246,246,246);
    font-size: .39rem;color: #323339;
    line-height: .72rem;

}