flex布局（使用场景）[微重点]案例

flex布局

前面使用的流式布局，全程都在使用百分比，还需要不断地计算，稍有失误，就不太合适了。

今天我们用flex来布局，flex又称作弹性盒子，可以随意伸缩改变其大小，不影响布局。非常好用。那么他的使用场景有哪些呢？

首先是在移动端开发中使用，因为pc端有些浏览器兼容性不太好，但是移动端是支持的，可以放心使用；
第一个场景就是制作搜索栏的时候，右边一个搜索，想让左边的搜索框自适应，这个时候用弹性盒子最合适不过了。先说一下布局思路，首先有一个父盒子包裹两个子盒子，给搜索按钮的大小可以写死，接下来就是设置搜索框的自适应问题了，首先先给父盒子一个display：flex; 然后给子盒子搜索框设置flex: 1;意思是：让搜索框占剩余空间的全部。这个时候也就自适应啦。同时还可以给父盒子设置一个粘性定位，绝对定位，固定在手机屏幕上方。
如图：
（肉色的圆形和方形可以放logo，图片等）没有合适的图片了，纯搭建的结构，发挥你的想象力吧。。。。

代码如下：

**结构**

<!-- 搜索模块 -->
    <div class="search_box">
        <div class="search"><span>哇咔咔卡卡</span></div>
        <a href="#">搜索</a>
</div>



**样式：**

/* 搜索模块 */

.search_box {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);       // 前面三行代码是让盒子在pc端水平居中，定位于2d平移相结合实现
    width: 100%;
    max-width: 580px;
    min-width: 360px;
    height: 60px;
    background-color: pink;
    border-bottom: 2px solid gray; 
}

.search_box .search {
    flex: 1;                                                 // 让搜索框自己填充剩余所有空间
    background-color: aquamarine;
    margin: 5px 10px;
    border-radius: 25px;
    box-shadow: 0 2px 4px rgba(30, 30, 30, .3);
    border: 1px solid gray;
}

.search_box .search span {
    display: inline-block;
    margin: 15px 70px;
}

.search_box .search::before {                                // 小的图片可以用伪元素来添加，更好用
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: bisque;
    margin: 5px 12px;
    border-radius: 50%;
}

.search_box a {
    width: 40px;
    height: 60px;
    text-align: center;
    background-color: aqua;
}

.search_box a::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-color: antiquewhite;
}

第二个场景：

设置导航，也是非常好用，分为两种，第一种是一行的导航，第二种是多行的导航。免去了流式布局的计算，可以直接使用flex的相关属性实现，非常好用。直接上使用方法：

一行式导航：

假设期望是一行显示五个大小相等自适应的盒子用于放导航。直接用以下代码ul>li*5生成五个小li，给ul设置display:flex; 主轴方向：flex-direction: row;给子盒子设置flex:1;这样五个小li就平均分到了一行显示：
代码如下：

**结构**

<!-- 导航部分 -->

    <ul>
        <li>
            <a href="#">
                <span></span>
                <span>景点</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span></span>
                <span>景点</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span></span>
                <span>景点</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span></span>
                <span>景点</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span></span>
                <span>景点</span>
            </a>
        </li>
    </ul>






**样式：**
ul {
    display: flex;
    flex-direction: row;           
    width: 100%;
    height: 60px;
    background-color: rgb(92, 221, 109);
}

ul li {
    flex: 1;
    height: 60px;
    background-color: aqua;
}

ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px 0;
}

ul li a span:nth-child(1) {
    width: 30px;
    height: 30px;
    background-color: pink;
}

多行式导航：

多行式导航与一行式导航技术的区别在于：多行式导航采用的是flex:百分比；的形式；
使用场景： 想实现一个两行，一行五个平均分配的导航怎么实现？很显然一行的宽度是100%，此时就可以给小li，设置flex:20%,这样一行就只能排列五个啦，此时不要忘记给父元素加一句换行的语句：flex-wrap: wrap;如果不设置这句话就代表不换行，即使超出也不换行。
代码如下：

 <!-- 下导航部分 -->
    <ul class="nav_main">
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>电话费</p>
            </a>
        </li>
    </ul>

样式：

/* 下导航部分 */

.nav_main {
    display: flex;
    height: 120px;
    flex-wrap: wrap;                       // 这句话不能忘，不然不会换行
    background-color: aquamarine;
}

.nav_main li {
    flex: 20%;                              // 一行只能排五个
    text-align: center;            
}

.nav_main li a {
    display: flex;
    margin-top: -5px;
}

.nav_main li a p::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    background-color: pink;
}

tips：flex布局中不会出现上边距合并的问题。直接使用margin-top没问题的。