flex 布局

最新推荐文章于 2024-11-16 17:16:31 发布

枕梦

最新推荐文章于 2024-11-16 17:16:31 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5+CSS 文章标签： flex布局浮动

本文链接：https://blog.youkuaiyun.com/qq_37768482/article/details/71775538

HTML5+CSS 专栏收录该内容

24 篇文章

订阅专栏

flex布局可替代浮动实现浮动带来的一些效果，既方便又不用考虑浮动带来的页面布局的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #container{
            display: flex;
            height: 200px;
            border: 1px solid red;
          /*  flex-direction: row-reverse;*//*显示方向：倒叙*/
           /* flex-wrap: wrap-reverse;*/
        }
        #left{
            width: 20%;
            height: 100px;
            background-color: #5bc0de;
            order: 1;
        }
        #center{
            width: 80%;
            height: 100px;
            background-color: #91a7de;
            order: 2;
            flex-shrink: 0;/*谁为0谁不变*/
            align-self: flex-end;
        }
        #right{
            width: 20%;
            height: 100px;
            background-color: #a08ede;
            order: 3;
        }
        /*#right2{
            width: 20%;
            height: 100px;
            background-color: #7fdec0;
        }*/
    </style>
    <title>Flex</title>
</head>
<body>

<div id="container">
    <div id="center">center</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <!--<div id="right2">right2</div>-->
</div>
</body>
</html>