Flex布局 学习（二）

上一篇《Flex布局 学习（一）》主要学了flex的基本用法及作用，现在来把flex具体运用到实例中，看看flex的弹性布局效果。

一、垂直居中布局

不知道有多少小伙伴在前端笔试面试时被问到：不定宽高如何水平垂直居中？

现在就给大家解答下这问题，最简单的实现方法就是我们的flex布局，只是在我们容器（父元素）加上一行代码即可。看下面例子

HTML部分

        <div id="box1">
            <span class="item">
            垂直居中
            </span>   
        </div>

CSS部分

#box1{
                 500px;
                height: 300px;
                border: 1px solid red;
                box-sizing: border-box;
                display: flex;
                justify-content: center;/*X轴水平居中*/
                align-items: center;/*y轴垂直居中*/
            }
            .item{
                 100px;
                height: 100px;
                background-color: pink;
                
            }

效果如下：

 二、用flex布局制作导航栏

以前我们制作导航栏的时候是使用float、table或display：inline-block.这些方法虽然能实现但也有一些问题存在，比如浮动会影响父元素以及兄弟元素的样式，需要清除浮动。但flex不一样，它属于弹性布局。

HTML部分

<nav id="box2">
            <ul>
                <li><a>×××有限公司</a></li>
                <li><a>首页</a></li>
                <li><a>关于我们</a></li>
                <li><a>联系我们</a></li>
                <li><a>产品案例</a></li>
                <li><a>新闻动态</a></li>
            </ul>
        </nav>
        <nav id="box2">
            <ul>
                <li><a>×××有限公司</a></li>
                <li><a>首页</a></li>
                <li><a>关于我们</a></li>
                <li><a>联系我们</a></li>
                
            </ul>
        </nav>

CSS部分

#box2 ul　　{
                display: flex;
                background-color: cornflowerblue;
            }
            
#box2 li{
                 flex: 1;
                 text-align: center;
                 line-height: 50px;
                 list-style: none;
                 border-right: 1px solid gainsboro;
             }
#box2 li a{
                 text-decoration: none;
             }

效果：

 三、悬挂式布局

类似左图右文那种

HTML部分

<div class="contain">
            <div class="left"><img src="img/a1.png"></div>
            <div class="right">
                <p>游戏悍将 35英寸曲面电竞显示器</p>
                <span>现价：￥999</span>
                <span style="text-decoration: line-through;">原价：￥1300</span>    
                <div class="btn">立即参与</div>
            </div>
        </div>

CSS部分

             .contain{
                 width: 300px;
                 height: 100px;
                 border: 1px solid purple;
                 display: flex;
             }
             .contain>div{
                 flex: none;
             }
             .left img{
                 width: 100px;
                 height: 100px;
                 
             }
             .right{
                 width: 200px;
                 height: 300px;
                 font-size: 12px;
                position: relative;
             }
             .right .btn{
                 width: 50px;
                 height: 30px;
                 line-height: 30px;
                 background-color: cornflowerblue;
                 border: 1px solid red;
                 color: #FFFFFF;
                 position: absolute;
                 right: 20px;
                 top: 60px;
             }

效果：

 四、多列布局

HTML部分

    <div id="box3">
        <div class="picture"><img src="img/pic4.jpg"/></div>
        <div class="info">
            <p>姓名：莹草</p>
            <p>等级：R级</p>
            <p>技能：治疗、回血、吸血</p>
            <span>来源：网易手游《阴阳师》</span>
        </div>
        <div class="btn">确认</div>
        <div class="btn">取消</div>
    </div>

CSS部分

             #box3{
                 margin: 0 auto;
                 width: 600px;
                 height: 160px;
                 border: 1px solid pink;
                 display: flex;
                 justify-content: space-around;
             }
             #box3>div{
                 flex: none;
             }
             #box3 .picture img{
                 width: 200px;
                 height: 150px;
             }
             #box3 .btn{
                 width: 50px;
                 height: 30px;
                 line-height: 30px;
                 text-align: center;
                 background-color: cornflowerblue;
                 border: 1px solid red;
                 color: #FFFFFF;
                 align-self: flex-end;
             }

效果：

 五、网格布局

5.1 基本网格布局，平均分配

<style type="text/css">
        #box4{
            display: flex;
        }
        #box4 .item{
            flex: 1;
            border: 1px solid green;
        }
    </style>
    <div id="box4">
        <div class="item item1">1/4</div>
        <div class="item item2">1/4</div>
        <div class="item item3">1/4</div>
        <div class="item item4">1/4</div>
    </div>

效果：

 5.2 百分比布局

<!--某一个固定-->
    <style type="text/css">
        #box5{
            display: flex;
        }
        #box5 .item{
            flex: 1;
            border: 1px solid green;
        }
        #box5 .item2{
            flex: 0 0 50%;
        }
    </style>
    <div id="box5">
        <div class="item item1">auto</div>
        <div class="item item2">1/2</div>
        <div class="item item3">auto</div>
        <div class="item item4">auto</div>
    </div>
    
    <!--两个固定-->
    <style type="text/css">
        #box6{
            display: flex;
        }
        #box6 .item{
            flex: 1;
            border: 1px solid green;
        }
        #box6 .item2{
            flex: 0 0 50%;
        }
        #box6 .item4{
            flex: 0 0 20%;
        }
    </style>
    <div id="box6">
        <div class="item item1">auto</div>
        <div class="item item2">1/2</div>
        <div class="item item3">auto</div>
        <div class="item item4">1/5</div>
    </div>
    
        <!--三个固定-->
    <style type="text/css">
        #box7{
            display: flex;
        }
        #box7 .item{
            flex: 1;
            border: 1px solid green;
        }
        #box7 .item1{
            flex: 0 0 10%;
        }
        #box7 .item2{
            flex: 0 0 50%;
        }
        #box7 .item4{
            flex: 0 0 20%;
        }
    </style>
    <div id="box7">
        <div class="item item1">1/10</div>
        <div class="item item2">1/2</div>
        <div class="item item3">auto</div>
        <div class="item item4">1/5</div>
    </div>

效果

 六、圣杯布局

前几次我分享了用float进行的圣杯布局，今天说下用flex来实现这经典三栏式布局

<style type="text/css">
        #box8{
            display: flex;
            flex-direction: column;
        }
        #box8 div{
            flex: 1;
        }
        .body{
            display: flex;
        }
        .footer{
            flex: 0 0 20%; !important;
            background-color: deepskyblue;
        }
        .head{
            background-color: deepskyblue;
            
            flex: 0 0 20%;!important;
        
        }
        .left{
            background-color: red;
            
            flex: 0 0 20%;!important;
        
        }
        #box8 .right{
            background-color: yellow;
            
            flex: 0 0 20%;!important
        
        }
    </style>
    <div id="box8">
        <div class="head">
            header
        </div>
        <div class="body">
            <div class="left">
                left
            </div>
            <div class="middle">
                main
            </div>
            <div class="right">
                right
            </div>
            
        </div>
        <div class="footer">
            footer
        </div>
    </div>

效果

 七、搜索框制作

关于搜索框的制作，曾经也发过用float制作的，在我那篇《HTML+CSS 简易搜索框》有分享过相关代码，这次我们用flex来制作这个搜索框

<style type="text/css">
        .search{
            margin: 0 auto;
            display: flex;
            box-sizing: border-box;
                   width: 400px;
                height: 38px;        
                border:solid 1px red;
        }
        .kc span{
            width: 46px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        
        input{
            flex: 1;
            outline: none;
            border: none;
            box-sizing: border-box;
            padding-left: 10px;
        }
    </style>
    <div class="search">
        <div class="kc">
            <span>课程</span>
        </div>
        <input type="text" placeholder="行家专业亲授，直击就业痛点"/>
        <button>搜索</button>
    </div>

效果

 新手小白的笔记到此为止，对于没写的流式布局、固定的footer栏还有各种详细的骰子布局，大家可以去看阮一峰老师的《Flex 布局教程：实例篇》