弹性盒的对其学习（flew）

什么是 flex?Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提
供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

.box{   display: flex; }

行内元素也可以使用 Flex 布局。

.box{  display: inline‑flex;}

Webkit 内核的浏览器，必须加上‑webkit前缀。

.box{  display: ‑webkit‑flex; /* Safari */  display: flex;}

注意，设为 Flex 布局以后，子元素的float、clear和vertical‑align属性将失效。
我们如果想让一个盒子里面的代码数值水平排列的话，flex(弹性盒)，最便捷的一种方法。
接下来我们带入数值看一下：

  <div class="nav">
        <ul class="f-l">
            <li>首页</li>
            <li>百度</li>
            <li>导航</li>
        </ul>
        <ul class="f-r">
            <li>美食</li>
            <li>健身</li>
            <li>工作</li>
            <li>娱乐</li>
            <li>旅游</li>
            <li>国外游</li>
            <li>名声古迹</li>
        </ul>
    </div>

在less里面加入数值：

*{
margin: 0;
padding: 0;
list-style: none;
}
.whb(@w,@h,@back){
width: @w;
height: @h;
background-color: @back;
}
.nav{
.whb(100%,60px,#EEEEEE);
.f-l{
    float: left;
    li{
        float: left;
        margin-right: 10px;
    }
    }
    .f-r{
    float: right;
    li{
        float: left;
        margin-right: 10px;
    }
}
}

在不加入flex数值的情况下：

image.png

然后我们试一下加入flex值（弹性盒）

image.png

他的弹性盒实在他的父元素nav上加：

.nav{
display: flex;
justify-content: space-around;
// 水平方向横向排列：左右间距相同；
.whb(100%,60px,#EEEEEE);

这就是弹性盒最基本上的应用，方便快捷的使数值排列更简单。