flex布局实现双飞翼

最新推荐文章于 2023-08-23 19:18:37 发布

一只头秃的死肥宅

最新推荐文章于 2023-08-23 19:18:37 发布

阅读量704

点赞数

分类专栏： HTML5 文章标签： HTML5 新手界面双飞翼 flex

本文链接：https://blog.csdn.net/xuemoKingDeath/article/details/71713820

版权

HTML5 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .container{
          display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;
        }
        .left{
            width: 20%;
            background-color: red;
            height: 100px;
        }
        .centent{
            width: 60%;
            background-color: green;
            height: 100px;
        }
        .right{
            width: 20%;
            background-color: #f2ad0a;
            height: 100px;
        }
        .right2{
            width: 20%;
            background-color: fuchsia;
            height: 100px;
        }
    </style>
    <title>flex布局</title>
</head>
<body>
<div class="div1">
    <div class="div2">

    </div>
</div>
<div class="container">
    <div class="left">left</div>
    <div class="centent">content</div>
    <div class="right">right</div>
</div>
</body>
</html>

一只头秃的死肥宅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局实现双飞翼

html>html lang="en">head> meta charset="UTF-8"> style> .div1{ width: 200px; height: 200px; background-color: red; display: flex;
复制链接

扫一扫