将 Angular Flex 与 "row wrap" 和 grid-gap 一起使用时，删除底部多余的 space

Question

我正在使用 Angular Flex 将卡片排列成一行。如果有几张卡片，卡片应该换行。区块的相关设置为

fxLayout="row wrap" fxLayoutGap="40px grid"

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

中的填充或负边距

此外，卡片被分组为块，左边有 header 和一条线。我创建了一个示例，它反映了 Angular Flex 应用的设置。图片取自这个样本：

如您所见，每个组的底部都有多余的space。我希望块和左边的线在最后一行卡片（块的）结束处结束：

您可以在 jsfiddle 上找到示例。

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

Answer 1

从最后两个元素中删除 padding-bottom:

#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>

将 Angular Flex 与 "row wrap" 和 grid-gap 一起使用时，删除底部多余的 space

Remove redundant space at bottom when using Angular Flex with "row wrap" and grid-gap

html

css

flexbox

angular-flex-layout