使用带有“行环绕”和Grid-gap的Angular Flex时，请删除底部的多余空间

问题描述

我正在使用Angular Flex来连续对齐卡片。如果有多个卡，则这些卡应换行。该块的相关设置为

argc

fxLayoutGap在内部元素上使用填充，并在容器上使用负边距，以便在内部元素包装到新行时也应用间隙。因此，我不想删除main设置（或删除

中的填充或负边距

此外，这些卡被分组为块，标题和左侧是一行。我创建了一个示例，该示例反映了Angular Flex应用的设置。该图像取自以下示例：

如您所见，每个组的底部都有多余的空间。我希望该块和左侧的线到（该块的）最后一排牌结束的地方结束：

jsfiddle

您可以在

上找到示例。

我如何调整CSS和/或Angular Flex设置以删除多余的空间并使行在卡片的最后一行结束，同时保留块之间的空间？

解决方法

从最后两个元素中删除#outer { border-left: 2px solid red; padding-left: 0px; padding-bottom: 40px; } #outer:not(:first-child) { margin-top: 40px; } #header { padding: 10px; margin: 0px 0px 40px 0px; background-color: red; } #container { margin: 40px -40px -40px 40px; display: flex; flex-flow: row wrap; box-sizing: border-box; } #inner { padding: 0px 40px 40px 0px; flex: 0 0 50%; box-sizing: border-box; max-width: 50%; min-width: 50%; } /* added */ #inner:last-child,#inner:nth-last-child(2):nth-child(odd){ padding-bottom:0; } /**/ #card { background-color: green; }：

<div id="outer">
  <div id="header">
    HEADER
  </div>
  <div id="container">
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
  </div>  
</div>
<div id="outer">
  <div id="header">
    HEADER
  </div>
  <div id="container">
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
  </div>  
</div>


<div id="outer">
  <div id="header">
    HEADER
  </div>
  <div id="container">
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
  </div>  
</div>

<div id="outer">
  <div id="header">
    HEADER
  </div>
  <div id="container">
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
    <div id="inner">
      <div id="card">
        CARD
      </div>
    </div>
  </div>  
</div>

"use strict";

const redis = require('redis');

exports.handler = async (event,context,callback) => {
    const client = redis.createClient({url: 'redis://anaha-redis.something.so.0001.meth.ing.amazonaws.com:6379'});

    client.on("error",(err) => {
        client.quit();
        console.log("Redis encountered an error.");
        callback(err,null);
    });
    
    client.on("ready",() => {
        const data = { type: "helloWorld",data: "Hello World!" };
        client.publish("testLambda-get-test-helloWorld",JSON.stringify(data));
        client.quit();
        console.log("HELLLLLOOOOOOOOOOOOOOO",data);
        return data;
    });
};