<! DOCTYPEhtml>          
<html>          
<head>          
    <meta charset="UTF-8">      
    <meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <title>Flex layout</title>        
    <style type="text/css">  
        body{margin: 0}
        .m-box{display:-webkit-box; }.m-test1{-webkit-box-flex:1.0;border:1pxsolid red; }.m-test2{-webkit-box-flex:2.0;border:1pxsolid blue; }/* flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; * /
        .m-flex{display: flex;flex-direction: row; }.m-test3{flex:1; border:1pxsolid red; }.m-test4{flex:2;border:1pxsolid blue; }.m-test5{flex:0 0 100px; border:1pxsolid red; }.m-test6{flex:1;border:1pxsolid blue; }.m-test7{flex:0 0 100px;border:1pxsolid blue; }.m-flex2{display: flex;flex-direction: row;width: 100%;flex-flow: row wrap;align-content: flex-start; }.m-test8{flex:0 0 25%;height: 50px;border:1px solid blue;box-sizing: border-box; }</style>        
</head>          
<body>  
    display:-webkit-box
    <div class="m-box">
        <div class="m-test1">xu</div>
        <div class="m-test2">With the bartender</div>
    </div>
    display:flex
    <div class="m-flex">
        <div class="m-test3">xu</div>
        <div class="m-test4">With the bartender</div>
    </div>Grail layout:<div class="m-flex">
        <div class="m-test5">On the left</div>
        <div class="m-test6">In the</div>
        <div class="m-test7">right</div>
    </div>Streaming layout:<div class="m-flex2">
        <div class="m-test8"></div>
        <div class="m-test8"></div>
        <div class="m-test8"></div>
        <div class="m-test8"></div>
        <div class="m-test8"></div>
        <div class="m-test8"></div>
        <div class="m-test8"></div>
        <div class="m-test8"></div>
        <div class="m-test8"></div>        
    </div>
</body>          
</html>
Copy the code

\

\

\

\