Как я могу сделать этот макет выровненным как надо?

Question

Я пытаюсь учиться и практиковать flexbox, создавая свои собственные макеты. Я не совсем уверен, почему нижний ряд col-1-of-2 не будет совпадать с правым col-1-of-2 во втором ряду. То же самое с col-1-of-4.

. Лучше ли это для сетки, потому что у вас больше контроля над пропуском столбцов? Я попытался сделать родительское поле 5px и дочерний отступ 5px, и оно было близко, но все еще не выровнено на 100%. Я предполагаю, что мы должны принять во внимание размер экрана?

.row {
  display: flex;
}

.col {
  display: flex;
  flex-grow: 1;
  border: 1px solid purple;
  margin: 1rem;
}

.col-1-of-1 {
  width: 100%;
  justify-content: center;
  background: lightblue;
}

.col-1-of-2 {
  width: 50%;
  justify-content: center;
  background: orange;
}

.col-1-of-3 {
  width: 33%;
  justify-content: center;
  background: lightgreen;
}

.col-1-of-4 {
  width: 25%;
  justify-content: center;
  background: lightcoral;
}

<div class="row">
  <div class="col col-1-of-1">
    <p>col-1-of-1</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
</div>


<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>

Answer 1

Является ли решетка для этого лучше, потому что у вас больше контроля над пропуском столбцов?

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

В частности, проблема возникает при добавлении элементов margin к .col. Для любой данной строки вы пытаетесь вписать содержимое в 100% width, но содержимое width s добавляет до 100% плюс независимо от того, существует ли margin для количества элементовВы включили.

Например - верхний ряд будет 100% плюс 2rem (margin с каждой стороны). В следующем ряду два элемента шириной 50%, которые добавляют к 100%, плюс 4rem, прикрепленный к 1rem margin s по обе стороны от двух элементов.

flex позаботится об этом за вас - он массирует размеры и промежутки, чтобы все было красиво и аккуратно вписано в пространство шириной 100%. Тем не менее, все становится плохо, когда вы начинаете смешивать типы .col-1-of-<num> и ожидать, что они хорошо выстроятся в ряд - flex делает свою работу, чтобы убедиться, что они соответствуют , что достигается ценойих выровнять .

Тем не менее, то, что вы хотите , возможно с помощью flex. В приведенном ниже решении просто используется calc(), чтобы убедиться, что margin s учитываются при установке width элемента - вместо .col-1-of-1, равного 100%, это calc(100% - 2em), .col-1-of-2 становится calc(50% - 2em) и т. Д.

Могут быть и другие способы подойти к этому с помощью flex, который также сработает, возможно, поиграв с flex свойство или justify-content свойство;или вы можете проверить grid. Удачи!

---

.row {
  display: flex;
}

.col {
  display: flex;
  flex-grow: 1;
  border: 1px solid purple;
  margin: 1rem;
}

.col-1-of-1 {
  width: calc(100% - 2rem);
  justify-content: center;
  background: lightblue;
}

.col-1-of-2 {
  width: calc(50% - 2rem);
  justify-content: center;
  background: orange;
}

.col-1-of-3 {
  width: calc(33% - 2rem);
  justify-content: center;
  background: lightgreen;
}

.col-1-of-4 {
  width: calc(25% - 2rem);
  justify-content: center;
  background: lightcoral;
}

<div class="row">
  <div class="col col-1-of-1">
    <p>col-1-of-1</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
</div>


<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>