小程序之Flex布局

浮动带来的影响

<div class="father">
    <div class="son"/>
    <div class="son"/>
    <div class="son"/>
</div>

上述布局在标准流下，是依次沿着竖直方向排开的。并且father包裹son布局。
但是，当使用浮动实现son水平布局时，fater将不能包裹son.为了使其能够包裹son，需要实现清除浮动的效果。
<style>
    .father{
        border: 1px solid red;
        overflow:hidden; //通过添加此属性清除浮动
    }
    
    .son{
        background-color:pink;
        border:1px solid black;
        float:left;
    }

</style>

flex 伸缩盒（弹性）模式和 flex方向

  <div class="father">
    <div class="son"/>
    <div class="son"/>
    <div class="son"/>
</div>

<style>
    .father{
        border: 1px solid red;
        display:flex; //把父盒子设置为伸缩盒模式，子盒子默认水平排列
        
        //设置伸缩盒子的方向
        flex-direction:row;//column row-reverse collumn-reverse
    }
    
    .son{
        background-color:pink;
        border:1px solid black;
        float:left;
    }

</style>

flex 方向

实现子盒子在父盒子中垂直居中的功能。
1. 传统做法 使用定位 子绝父相
2. 使用flex

 .father{
    border: 1px solid red;
    display:flex; 
    justify-content:center; //水平居中 （主轴对齐） space-between
    align-items:center;  //垂直 居中 （交叉轴对齐）flex-end
}

.son{
    background-color:pink;
    border:1px solid black;
    float:left;
}

flex 换行

  <div class="father">
    <div class=nav>
        <div class="son">1</son>
        <div class="son">2</son>
        <div class="son">3</son>
        <div class="son">4</son>
        <div class="son">5</son>
        <div class="son">6</son>
        <div class="son">7</son>
        <div class="son">8</son>
        <div class="son">9</son>
        <div class="son">10</son>
    </div>    
</div>

<style>
    .father{
        width:500px;
        height:1000px;
        margin:0 auto;
    }
    
    .nav{
        display:flex;
        flex-wrap:wrap; //实现换行
    }
    
    .son{
        width:20%;
        background-color:pink;
        border:1px solid black;
        float:left;
        box-sizing:border-box; //注意
    }

</style>

用传统盒子实现首页

效果图：

移动端开发，首先添加如下参数：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


<style>

    *{
        margin: 0px;
        border: 0px;
        list-style: none;
    }
    .slider img{
        width: 375px;
    }

    .menus ul{
        margin: 0 auto;
        overflow: hidden;
        padding:0px;
    }
    .menus li{
        border: 1px solid #999999;
        width: 33.3333%;
        height: 100px;
        float: left;
        box-sizing: border-box;
        text-align: center;
    }

    .menus img{
        width: 40px;
        height:40px;
        margin-top: 18px;
    }

    .menus p{
        color: #333;
        font-size: 15px;
    }
    .menus a{
        text-decoration: none;
        cursor: text;
    }



<div class="slider">
    <img src="assets/images/banner-01.png" alt="">
</div>

<div class="menus">
    <ul>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
        <li>
            <a href="">
                <img src="assets/icons/grid-01(1).png" alt="">
                <p>美食</p>
            </a>
        </li>
    </ul>
</div>

<div class="login">
    登录
</div>

使用flex实现首页

<style>

    *{
        margin: 0px;
        border: 0px;
        list-style: none;
    }
    .slider img{
        width: 375px;
    }

    .menus ul{
        margin: 0 auto;
        padding:0px;
        display: flex;
        flex-wrap: wrap;
    }
    .menus li{
        border: 1px solid #999999;
        width: 33.3333%;
        box-sizing: border-box;
    }

    .menus img{
        width: 40px;
        height:40px
    }

    .menus p{
        color: #333;
        font-size: 15px;
    }
    .menus a{
        text-decoration: none;
        cursor: text;
        display: flex;
        height: 100px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>