弹性盒子模型布局 Flex

最新推荐文章于 2022-04-15 21:25:03 发布

rib-pet

最新推荐文章于 2022-04-15 21:25:03 发布

阅读量135

点赞数

文章标签： html

tony-nf.peng

本文链接：https://blog.youkuaiyun.com/ningfeng8899/article/details/115904623

版权

本文通过一个具体的实例展示了如何使用Flex布局实现元素的灵活排列与定位。包括了如何设置弹性盒子、方向、对齐方式等属性，并介绍了如何通过order属性调整元素显示顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .root {
            background: #2B3A42;
            height: 600px;
            width: 400px;
            display: flex; /*弹性盒子模型*/
            flex-direction: row;
            align-items: center; /*上下居中*/
            justify-content: center; /*左右对齐*/
        }

        /*
        权重的计算，每个元素的权重占全部值的除
        */

        .box1 {
            width: 100px;
            height: 150px;
            background: #f1f1f1;
            margin: 5px;
            /*flex: 1; !*权重确定宽度，如果使用权重flex,则宽度不会生效*!*/
            order: 3;
        }
        .box2 {
            width: 100px;
            height: 150px;
            background: #f1f1f1;
            margin: 5px;
            /*flex: 1;*/
            order: 2; /*改变元素的顺序*/
        }

        .box3 {
            width: 100px;
            height: 150px;
            background: #f1f1f1;
            margin: 5px;
            /*flex: 1;*/
            order: 1;
        }

    </style>
</head>
<body>


<div class="root">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>
</body>
</html>

以element-ui Tree为例子来展示Flex布局：