flex-wrap

来源：互联网发布：公知什么意思编辑：程序博客网时间：2024/05/21 17:34
<!doctype html><html><head>    <style type="text/css">        #main1{            width:200px;            height: 300px;            border:1px solid black;            display: flex;            flex-wrap:nowrap;        }        #main2{            width:200px;            height: 300px;            border:1px solid black;            display: flex;            flex-wrap:wrap;        }        #main3{            width:200px;            height: 300px;            border:1px solid black;            display: flex;            flex-wrap:wrap-reverse;        }    </style></head><body>    <h4>This is an example for flex-wrap:nowarp</h4>    <div id="main1">        <div style="background-color:red;">RED</div>        <div style="background-color:lightblue;">BLUE</div>        <div style="background-color:lightgreen;">GREEN</div>        <div style="background-color:yellow;">YELLOW</div>        <div style="background-color:lime;">LIME</div>        <div style="background-color:orange;">Orange</div>        <div style="background-color:gray;">GRAY</div>        <div style="background-color:purple;">PURPLE</div>        <div style="background-color:olive;">OLIVE</div>    </div>    <h4>This is an example for flex-wrap:warp</h4>    <div id="main2">        <div style="background-color:red;">RED</div>        <div style="background-color:lightblue;">BLUE</div>        <div style="background-color:lightgreen;">GREEN</div>        <div style="background-color:yellow;">YELLOW</div>        <div style="background-color:lime;">LIME</div>        <div style="background-color:orange;">Orange</div>        <div style="background-color:gray;">GRAY</div>        <div style="background-color:purple;">PURPLE</div>        <div style="background-color:olive;">OLIVE</div>    </div>    <h4>This is an example for flex-wrap:warp-reverse</h4>    <div id="main3">        <div style="background-color:red;">RED</div>        <div style="background-color:lightblue;">BLUE</div>        <div style="background-color:lightgreen;">GREEN</div>        <div style="background-color:yellow;">YELLOW</div>        <div style="background-color:lime;">LIME</div>        <div style="background-color:orange;">Orange</div>        <div style="background-color:gray;">GRAY</div>        <div style="background-color:purple;">PURPLE</div>        <div style="background-color:olive;">OLIVE</div>    </div></body></html>
no-wrap
wrap
wrap-reverse
0 0