弹性盒子display:flex flex详细举例 超详细！

<div class="box">

        <!-- flex：等比分成10份 flex:1 就相当于占了10分之一-->
        <h2>flex：等比分成10份 flex:1 就相当于占了10分之一</h2>
        <div class="bigbox">
            <div class="small4 nick">我是flex:4 </div>
            <div class="small5 nick">我是flex:5</div>
            <div class="small6 nick">我是flex:1</div>
        </div>

        <!-- flex：使用百分比 -->
        <h2>flex：使用百分比</h2>
        <div class="bigbox">
            <div class="small1 nick">我是flex:30%</div>
            <div class="small2 nick">我是flex:30%</div>
            <div class="small3 nick">我是flex:40%</div>
        </div>

    </div>

.box {
        width: 100%;
        height: 100%;
        background-color: #ccc;
    }

    .bigbox {
        display: flex;
    }

    .small1 {
        background-color: #f66;
        flex: 30%;
    }

    .small2 {
        background-color: #f77;
        flex: 30%;
    }

    .small3 {
        background-color: #f88;
        flex: 40%;
    }

    .small4 {
        background: rgba(13, 218, 105, 0.493);
        flex: 4;
    }

    .small5 {
        background: rgba(48, 161, 76, 0.767);
        flex: 5;
    }

    .small6 {
        background: rgba(29, 197, 127, 0.932);
        flex: 1;
    }

    .nick {
        text-align: center;
        height: 300px;
        line-height: 300px;
    }
    h2{
        text-align: center;
    }