Удаление избыточного пространства внизу при использовании Angular Flex с "переносом строк" и сеткой-разрывом

#html #css #flexbox #angular-flex-layout

#HTML #css #flexbox #angular-flex-layout

Вопрос:

Я использую Angular Flex для выравнивания карточек в строке. Карточки должны быть перенесены в новую строку, если их несколько. Соответствующие настройки блока

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

fxLayoutGap использует отступы для внутренних элементов и отрицательное поле для контейнера, так что пробел также применяется, когда внутренние элементы переносятся в новую строку. Поэтому я не хочу удалять grid настройку (или отступы или отрицательные поля в

Кроме того, карточки группируются в блоки с заголовком и строкой слева. Я создал образец, который отражает настройки, применяемые Angular Flex. Изображение взято из этого примера:

Как вы можете видеть, в нижней части каждой группы есть избыточное пространство. Я хочу, чтобы блок и строка слева заканчивались там, где заканчивается последний ряд карточек (блока):

Вы можете найти образец на jsfiddle.

Как я могу настроить CSS и / или настройки Angular Flex, чтобы удалить избыточное пространство и сделать конец строки в последнем ряду карточек, сохраняя при этом пространство между блоками?

1. К вашему сведению, у вас много элементов с одинаковым значением идентификатора. Это недопустимый HTML (идентификаторы должны быть уникальными) и может вызвать проблемы с поведением скрипта. Вы должны использовать повторно используемые классы (наборы похожих элементов).

Ответ №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>

1. Большое вам спасибо, это хорошо работает для 2 элементов в строке. В зависимости от размера носителя у меня иногда бывает 5, 3, 2 или 1 элемент на строку. Существует ли подход, который работает для любого количества элементов в строке, или мне нужно настроить псевдоклассы CSS в соответствии с размером носителя?

2. Еще раз, большое вам спасибо. Было легко создать CSS для других размеров носителей. Кажется, я могу опустить эту :nth-child(odd) часть, потому что даже если стиль применяется к некоторым элементам в строке, остальные гарантируют, что пробел отображается.