html5第八课时，flex的基础应用

最新推荐文章于 2022-01-19 17:10:44 发布

甲戌天火

最新推荐文章于 2022-01-19 17:10:44 发布

阅读量262

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/71775631

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        #content{
            display: flex;
            /*flex-direction: row-reverse;
             设置显示的顺序，倒序，从做到右，从右到左等等，
                row（默认值）：主轴为水平方向，起点在左端。
                row-reverse：主轴为水平方向，起点在右端。
                column：主轴为垂直方向，起点在上沿。
                column-reverse：主轴为垂直方向，起点在下沿。*/
            flex-wrap: wrap;/*nowrap（默认）：不换行。
                             wrap：换行，第一行在上方。
                             wrap-reverse：换行，第一行在下方。*/
        }
        #left{
            width: 20%;
            height: 100px;
            background-color: #cccccc;
            order: 1;/*用order调整顺序，*/
        }
        #center{
            width: 60%;
            height: 100px;
            background-color: red;
            order: 3;
        }
        #right{
            width: 20%;
            height: 100px;
            background-color: yellowgreen;
            order: 4;
        }
        #right2{
            width: 20%;
            height: 100px;
            background-color: yellow;
            order: 2;
        }
    </style>
</head>
<body>
    <div id="content">
        <div id="left">left</div>
        <div id="center">center</div>
        <div id="right">right</div>
        <div id="right2">right2</div>
    </div>
</body>
</html>

甲戌天火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5第八课时，flex的基础应用

html>html>head lang="en"> meta charset="UTF-8"> title>flextitle> style> #content{ display: flex; /*flex-direction: row-reverse; 设置显示的顺序，倒序，从做
复制链接

扫一扫