Маржинальное / вертикальное пространство для столбцов CSS (flex) - PullRequest
Новая
       22

Маржинальное / вертикальное пространство для столбцов CSS (flex)

0 голосов
/ 18 февраля 2020

Сценарий

Одна секция сверху с двумя колонками (flex). Каждый столбец содержит несколько элементов.

На один раздел ниже одного столбца.

Вертикальное пространство между элементами в каждом столбце должно быть 30px (мы рассматриваем размеры rem или em, но давайте придерживаться в px для этого обсуждения).

Вертикальное пространство между разделами должно быть 40px. (Я выбираю другое число, чтобы сделать его более интересным.)

Реализация, первая попытка

Первый шаг - установить margin-bottom для разных элементов. 

<style>
.section-top {
  display: flex;
}
.section-top > div {
  width: 50%;
}
.container > section {
  margin-bottom: 40px;
}
.column-left > section,
.column-right > section {
  margin-bottom: 30px;
}
</style>
<div class="container">
  <section class="section-top">
    <!-- top section with two columns (flex) -->
    <div class="column-left">
      <section>Block L1</section>
      <section>Block L2</section>
    </div>
    <div class="column-right">
      <section>Block R1</section>
      <section>Block R2</section>
      <section>Block R3</section>
    </div>
  </section>
  <section class="section-bottom">Section 2</div>
  <section class="section-bottom">Section 3</div>
</div>

Задача

Теперь между видимым содержимым верхней и нижней секций есть вертикальное пространство 70px. Вместо этого нам нужно только 40px.

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

Вопрос

Какова хорошая и распространенная стратегия для решения этой проблемы, и между верхними и нижними секциями должно быть только 40 пикселей вместо 70 пикселей?

В идеале это должно поддерживать:

  • Различное число и высота элементов в каждом столбце.
  • Возможность столбца без элементов.
  • Различный вертикальный интервал для элементов столбца по сравнению с разделами верхнего уровня.
  • Нейтрализация или свертывание с поля из вложенных элементов.
  • На основе компонентов CSS, где определение поля между разделами верхнего уровня не зависит от содержимого раздела.

То, что я пробовал до сих пор

Существует много способов решить эту проблему технически:

  • Установите margin-bottom: 0; на :last-child в каждом столбце.
    • Проблема: не нейтрализует поля от вложенных элементов.
  • Используйте margin-bottom: 0; на .section-top и вместо этого используйте 40px в каждом столбце или на последнем дочерний элемент внутри каждого столбца.
    • Проблема: Нужно определить 40px в двух местах. Например, если я захочу изменить вертикальное пространство между секциями верхнего уровня на 60 пикселей позже, мне также потребуется обновить CSS для столбцов.
  • Использовать отрицательные поля для компенсации?

Все это будет работать, но, возможно, есть что-то лучшее, чего я не вижу.

1 Ответ

0 голосов
/ 18 февраля 2020

Вот одно из решений. Я не знаю, является ли он лучшим, но он работает для меня.

Мы добавляем ::after псевдоэлемент в каждый столбец. 

<style>
.container > section {
  margin-bottom: 40px;
}
.section-top {
  display: flex;
}
.section-top > .column {
  width: 50%;
}
.section-top > .column > section {
  margin-bottom: 30px;
}
.section-top > .column::after {
  /* Optionally change these to 40px / -40px, not sure what is better */
  margin-top: 30px;
  margin-bottom: -30px;
}
</style>
<div class="container">
  <section class="section-top">
    <!-- top section with two columns (flex) -->
    <div class="column column-left">
      <section>Block L1</section>
      <section>Block L2</section>
    </div>
    <div class="column column-right">
      <section>Block R1</section>
      <section>Block R2</section>
      <section>Block R3</section>
    </div>
  </section>
  <section class="section-bottom">Section 2</div>
  <section class="section-bottom">Section 3</div>
</div>
...