如何为具有不同大小项目的网格使用“flex”和“gap”？（间隙不起作用）答案

【问题标题】：How to use "flex" and "gap" for a grid with different-sized items? (gap is not working)如何为具有不同大小项目的网格使用“flex”和“gap”？（间隙不起作用）
【发布时间】：2021-07-12 19:48:51
【问题描述】：

我的代码：

<head>
    <style>
        *, *:before, *:after {
          box-sizing: border-box;
        }
        html{
          background-color: #aaa;
          width: 100%;
          height: 100%;
        }
        body {
          background-color: #aaa;
          width: 100%;
          height: 100%;
          margin: 0px;
          padding: 0px;
        }

        .item {
            background-color: #fff;
        }
        
        .d-flex-column {
            display: flex;
            flex-direction: column;
        }
        
        .d-flex-row{
            display: flex;
            flex-direction: row;
        }
        
        .w-100{
            width: 100%;
        }
        .h-100{
            height: 100%;
            }
    </style>
</head>
<body>
    <div class="d-flex-row w-100 h-100" style="gap: 0.5em;">
      <div class="d-flex-column h-100" style="flex: 1; gap:0.5em;">
        <div class="item" style="flex:2;">2</div>
        <div class="item" style="flex:1;">1</div>
        <div class="item" style="flex:1;">1</div>
      </div>
      <div class="d-flex-column h-100 " style="flex: 1; gap:0.5em;">
        <div class="item" style="flex:3;">3</div>
        <div class="item" style="flex:1;">1</div>
      </div>
    </div>
</body>

结果：

如果您仔细观察，右下角的项目的高度与左边的大小不同。我什至可以使用“flex：x；”和“差距”？

我知道我可以通过“display: grid;”实现同样的效果但我想了解我做错了什么。

【问题讨论】：

标签： css flexbox css-grid

【解决方案1】：

这是因为gap 属性：左列有两个0.5em 间隙，而右列只有一个。如果您使用border 来分隔单元格，则不会出现此问题。

<head>
    <style>
        *, *:before, *:after {
          box-sizing: border-box;
        }
        html{
          background-color: #aaa;
          width: 100%;
          height: 100%;
        }
        body {
          background-color: #aaa;
          width: 100%;
          height: 100%;
          margin: 0px;
          padding: 0px;
        }

        .item {
            background-color: #fff;
        }
        
        .d-flex-column {
            display: flex;
            flex-direction: column;
        }
        
        .d-flex-row{
            display: flex;
            flex-direction: row;
        }
        
        .w-100{
            width: 100%;
        }
        .h-100{
            height: 100%;
            }
            
        .border {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="d-flex-row w-100 h-100">
      <div class="d-flex-column h-100" style="flex: 1">
        <div class="item border" style="flex:2;">2</div>
        <div class="item border" style="flex:1;">1</div>
        <div class="item border" style="flex:1;">1</div>
      </div>
      <div class="d-flex-column h-100 " style="flex: 1">
        <div class="item border" style="flex:3;">3</div>
        <div class="item border" style="flex:1;">1</div>
      </div>
    </div>
</body>

【讨论】：

感谢您的回答。但是您的解决方案在右下角的空白处导致了同样的问题。 ;-)
在预览中可以，我不知道为什么，但是如果您在全屏或浏览器中打开预览，它会起作用