Добавление класса «коллапс» к гибкой сетке создает неравномерный интервал - PullRequest
Новая
       11

Добавление класса «коллапс» к гибкой сетке создает неравномерный интервал

0 голосов
/ 16 октября 2019

Итак, я создаю сеточную систему на основе flexbox, и все идет довольно гладко. Основы моей сетки: 

<div class="row">
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
</div>

И в моем css: 

.row {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
}

.column {
    padding: 10px;
    flex: 1 1 0%;
}

По сути, это делает колонки достаточно текучими, и они сжимаются / растут, заполняя все доступное пространство. Это здорово для меня, так как мне нужно использовать это в различных проектах, где я не могу полностью настроить сетку для каждого. Однако я столкнулся с небольшой «проблемой». Я собирался создать класс с именем «.collapse», чтобы можно было свернуть левый / правый отступ, чтобы некоторые столбцы совпали сразу друг с другом (например: если я хотел использовать div с цветом фона (добавив цветовой класс кcolumn => .column .green), чтобы перейти к изображению в следующем столбце). Тем не менее, интервал все не в порядке, по сравнению со строкой / столбцами над ним. 

<div class="row">
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
</div>

пример скриншота здесь Как вы можете видеть в моем небольшом примере макета, они действительно выстраиваются в линию, но правая и левая поля «уменьшились». Есть ли какой-нибудь умный способ обойти это? Я попытался добавить «левые / правые поля» к типу first-type и last-of-type, но это просто становится немного хакерским, так как после добавления чего-либо между ними начинаются странные проблемы с выравниванием.

1 Ответ

0 голосов
/ 16 октября 2019

Для такого типа сеточной системы вам обычно не рекомендуется использовать структурные стили непосредственно для ячеек сетки, и это позволяет вам сделать что-то вроде этого: 

.row {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin-left: -10px;
}

.column {
  flex: 1 0 0;
  padding-left: 10px;
}

.collapse           { margin-left: 0; }
.collapse > .column { padding-left: 0; }

.red,
.purple {
  padding: 10px;
  margin-bottom: 10px;
}

.red    { background-color: red; }
.purple { background-color: purple; }
<div class="row">
  <div class="column">
    <div class="purple">
      <p>Column</p>
    </div>
  </div>
  <div class="column">
    <div class="red">
      <p>Column</p>
    </div>
  </div>
  <div class="column">
    <div class="purple">
      <p>Column</p>
    </div>
  </div>
  <div class="column">
    <div class="red">
      <p>Column</p>
    </div>
  </div>
</div>

<div class="row collapse">
  <div class="column">
    <div class="purple">
      <p>Column</p>
    </div>
  </div>
  
  <div class="column">
    <div class="red">
      <p>Column</p>
    </div>
  </div>
  
  <div class="column">
    <div class="purple">
      <p>Column</p>
    </div>
  </div>
  
  <div class="column">
    <div class="red">
      <p>Column</p>
    </div>
  </div>
</div>

Этот подход не использует поля на внешних концах, что, на мой взгляд, более удобно.

Стоит отметить, что такая система ОСс появлением CSS Grid Layout он уже не так уж полезен, но он у вас есть.

Кстати, 0 всегда равен 0, и ему никогда не требуется единица.

...