flex-wrap

最新推荐文章于 2024-08-01 16:27:16 发布

高手坟墓丶

最新推荐文章于 2024-08-01 16:27:16 发布

阅读量941

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_31070475/article/details/54565657

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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