自求 2022-08-10 14:07 采纳率: 100%
浏览 79
已结题

flex布局,盒子大小不固定,换行出现问题

我想要达到的结果

在一个div中,有若干个盒子。如何用flex布局达到下面的效果。

<div class="div">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
        <div class="div5">5</div>
        <div class="div6">6</div>
        <div class="div7">7</div>
        <div class="div8">8</div>
        <div class="div9">9</div>
    </div>

img

  • 写回答

3条回答 默认 最新

  • 雾里桃花 2022-08-10 14:30
    关注

    img

    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style>
                * {
                    margin: 0;
                }
                
                .radius{
                    border-radius: 8px;
                }
                
                .bg-orange{
                    background: orange;
                }
                
                .bg-green {
                    background: yellowgreen;
                }
                
                .head {
                    height: 200px;
                    width: 100%;
                    display: flex;
                }
                
                .head .left {
                    width: 40%;
                    height: 100%;
                    margin-right: 10px;
                }
                
                .head .right {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                }
                
                .head .right .r-top {
                    height: 50%;
                    width: 100%;
                }
                
                .head .right .r-bottom {
                    height: 50%;
                    margin-top: 10px;
                    display: flex;
                    width: 100%;
                }
                
                .head .right .r-bottom .item {
                    flex: 1;
                }
                
                .head .right .r-bottom .item:first-child {
                    margin-right: 10px;
                }
                
                
                .body {
                    width: 100%;
                    height: 100px;
                    display: flex;
                    margin-top: 10px;
                }
                
                .body .item {
                    flex: 1;
                    margin-right: 10px;
                }
                
                .body .item:last-child {
                    margin: 0;
                }
                
                .foot {
                    width: 100%;
                    height: 100px;
                    display: flex;
                    margin-top: 10px;
                }
                
                .foot .item {
                    flex: 1;
                    margin-right: 10px;
                }
                
                .foot .item:last-child {
                    margin: 0;
                }
                
    
            </style>
        </head>
        <body>
            <div class="main">
                <div class="head">
                    <div class='left bg-orange radius'></div>
                    <div class='right'>
                        <div class='r-top bg-green radius'></div>
                        <div class='r-bottom'>
                            <div class='item bg-green radius'></div>
                            <div class='item bg-green radius'></div>
                        </div>
                    </div>
                </div>
                
                <div class='body'>
                    <div class='item radius bg-orange'></div>
                    <div class='item radius bg-orange'></div>
                    <div class='item radius bg-orange'></div>
                </div>
                
                <div class='foot'>
                    <div class='item radius bg-orange'></div>
                    <div class='item radius bg-orange'></div>
                </div>
            </div>
        </body>
    </html>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • ZionHH 2022-08-10 14:20
    关注

    img

    评论
  • 谷雨睡不醒 2022-08-10 14:31
    关注

    这个用一个flex肯定是实现不了的,但是如果绿色方块的高度都相同,地下两行高度相同的话可以可以通过添加flex-warp:warp 共用一个flexbox

    img

    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 8月18日
  • 已采纳回答 8月10日
  • 修改了问题 8月10日
  • 创建了问题 8月10日

悬赏问题

  • ¥15 关于#c++#的问题:在A和B类中应该怎么定义复制构造函数来避开unordered_set复制构造的问题(相关搜索:头文件)
  • ¥15 MICE包多重插补后数据集汇总导出
  • ¥15 一道算法分析问题(关于3-MSAT)
  • ¥15 C++ FLUENT 化学反应速率 编写困难
  • ¥15 Python嵌套交叉验证
  • ¥15 linuxkit+elasticsearch
  • ¥15 兄得萌6.13do题😭😭大一小东西的work
  • ¥15 投不到原始数据,gdal投影代码
  • ¥20 卷积混响的代码帮写。。
  • ¥88 借助代码处理雷达影像,识别任意区域洪水前后的被淹没区域,并可视化展示。