2019年5月23日
 |  没有评论

弹性布局

<html>
<style>
*{
margin:0px;
padding:0px;
}
.box{
    display:flex;

    /*flex-direction伸缩流方向
    row:从左到右排列
    row-reverse,从右到左排列
    column,从上到下排列
    column-reverse;从下到上排列
    */
    flex-direction:row;

    /*flex-wrap伸缩换行
    nowrap:不换行
    wrap:换行
    wrap-reverse:换行并颠倒行顺序
    */
    flex-wrap:wrap;

    /*justify-content水平对齐方式
    flex-start:左对齐
    flex-end:右对齐
    center:居中对齐
    space-between:水平居中分布，两边不留白
    space-around:水平居中分布，两边留白
    */
    justify-content:center;

    /*align-items纵向对齐方式
    flex-start:顶对齐
    flex-end:底对齐
    center:居中对齐
    baseline:第一行文字基线对齐
    stretch:拉伸对齐
    */
    align-items:stretch;

    /*padding:10px;*/
    border:1px solid #f00;
}
#d1{
    /*flex:1;占比*/
    margin:10px;
    background:red;
}
#d2{
    /*flex:2;*/
    margin:10px;
    background:yellow;
}

#d3{
    margin:10px;
    background:blue;
    color:white;
}

.d4{
    margin:10px;
    background:green;
    color:white;
}
</style>
<body>
<div class="box">
    <div id="d1">
    test-div1
    </div>

    <div id="d2">
    test-div2
    </div>

    <div id="d3">
    test-div3
    </div>

    <div class="d4">
    test-div4
    </div>

    <div class="d4">
    test-div5
    </div>

    <div class="d4">
    test-div6
    </div>

    <div class="d4">
    test-div7
    </div>

    <div class="d4">
    test-div8
    </div>

    <div class="d4">
    test-div9<br>test-div9
    </div>

    <div class="d4">
    test-div10
    </div>
</div>
</body>
</html>
标签：,