废鸡程序员 2022-07-14 16:54 采纳率: 86%
浏览 77
已结题

我用弹性盒布局的问题！？

我用弹性盒布局想要的效果是两行两列，但是中间独占一行我怎么弄？

img

  • 写回答

5条回答 默认 最新

  • 雾里桃花 2022-07-14 17:35
    关注

    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>
        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        .box .item {
            background: red;
            width: 49%;
            height: 200px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class='box'>
        <div class='item'>flex</div>
        <div class='item'>flex</div>
        <div class='item'>flex</div>
        <div class='item'>flex</div>
    </div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 废鸡程序员 2022-07-14 17:00
    关注

    @你好！机器人

    评论
  • _念_ 2022-07-14 17:00
    关注

    两列 不用这么麻烦吧 两个盒子 每个50%宽度就好了

    评论
  • 前行的枫_denglinbo 2022-07-14 17:01
    关注

    可以用多个弹性盒子或者用grid布局

    评论
  • 焦焦焦iii 2022-07-14 17:12
    关注

    贴一下代码呀

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

报告相同问题？

问题事件

  • 系统已结题 7月23日
  • 已采纳回答 7月15日
  • 创建了问题 7月14日

悬赏问题

  • ¥15 k210显示failed init to model
  • ¥15 Evil-droid生成的APK手机已经下载但无法建立任务
  • ¥25 c语言韩信点兵的变式
  • ¥15 怎么根据书上的例子完成这个问题呢？
  • ¥15 ECharts 增加Zoom,整行包括右边的Text一起滑动
  • ¥15 关于网上一个easyx制作的见缝插针小游戏(c++)
  • ¥15 开地址法双散列函数处理碰撞
  • ¥15 想问一下这个是什么情况 虚拟机Linux打不开了
  • ¥15 联通光猫掉注册了怎么重新注册上去
  • ¥15 关于unity开发steamvr程序遇到的问题