<! 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
\
\
\