flex

最新推荐文章于 2024-08-01 11:42:02 发布

原创最新推荐文章于 2024-08-01 11:42:02 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex

本文通过一个简单的HTML页面示例介绍了CSS Flex布局的基本用法，特别是如何使用order属性来调整元素的显示顺序。示例中定义了一个包含三个子元素（左、中、右）的容器，并通过设置不同的order值来改变它们在页面上的排列顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        #container{
            display: flex;
          /* flex-direction: row-reverse;*/

        }
        #left{
            width: 20%;
            height: 200px;
            background-color: #007149;
            order: 2;
        }
        #center{
            width: 60%;
         height: 200px;
            background-color: #0662AE;
            order: 3;
        }
        #right{
            width: 20%;
            height: 200px;
            background-color: #4D2E83;
            order: 1;
        }

    </style>
</head>
<body>
<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>

</div>
</body>
</html>