Другие способы обоснования контента: пробел?

Question

Я пытаюсь провести рефакторинг некоторых CSS в следующих классах:

.cards-list {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.cards-list .card-item {
    margin-bottom: 15px;
    flex-basis: 49%;
    padding: 30px 45px;
}

.cards-list .card-item-small {
    flex-basis: 25%;
}

Моя задача состоит в том, чтобы выравнивать содержимое только элементов .card БЕЗ создания новых классов CSS. Как вы можете видеть, элементы card-items и card-item-smalls существуют в списках card-карт, а свойство justify-content применяется только к элементам-наследникам. Одним из способов решения этой проблемы было бы создание нового класса, который применяется к контейнеру только вокруг small-card-item-smalls и имеет свойство:

.specific-cards {
    justify-content: unset;
}

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

.cards-list {
    flex-direction: row;
    align-items: flex-start;
    //justify-content: space-between; //REMOVED
}

.cards-list .card-item {
    margin-bottom: 15px;
    flex-basis: 49%;
    padding: 30px 45px;
    margin-left: 3.5px; //ADDED
    margin-right: 3.5px; //ADDED
}

Но это также имеет проблемы, поскольку на внешней стороне карточных предметов есть нежелательное пространство. У меня вопрос, как мне достичь цели без нежелательных побочных эффектов?

Answer 1

Вы можете использовать margin вместо align-items и / или justify-content.

пример:

не уверен, что вы искали пробел или пробел, поэтому я поставил оба варианта маржи

div div {
  box-sizing: border-box;
  border: solid;
}

.cards-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;/* will not spray the entire row */
}

.cards-list .card-item {
  margin-bottom: 15px;
  flex-basis: 49%;
  padding: 30px 45px;
  margin: 0 auto 15px;
}

.cards-list .card-item-small {
  flex-basis: 25%;
}

div div:before {
  content: attr(class);
}

.cards-list.bis .card-item {
  margin: 0 0 15px;
  /* reset for demo*/
  color: darkblue;
}

.cards-list.bis .card-item:nth-child(2n) {
  margin-left: auto;
}

<div class="cards-list">
  <div class="card-item"></div>
  <div class="card-item"></div>
  <div class="card-item-small"></div>
  <div class="card-item-small"></div>
  <div class="card-item-small"></div>
  <div class="card-item-small"></div>
</div>
<hr>
<div class="cards-list">
  <div class="card-item-small"></div>
  <div class="card-item-small"></div>
  <div class="card-item"></div>
</div>
<hr>
<div class="cards-list bis">
  <div class="card-item"></div>
  <div class="card-item"></div>
  <div class="card-item"></div>
  <div class="card-item"></div>
</div>

Вот несколько базовых c примеров, таких как различные значения justify-content через margin:

Демо ниже

.flex {
  display: flex;
  width: 20em;
  background: gray;
  margin: 0.5em auto;
}

.flex > div {
  border: solid;
  padding: 1em;
}

.justify-start > div {/* defaut behavior alike : margin:0;*/}

.justify-end  :first-child {
  margin-left: auto;
}

.justify-between  :not(:first-child) {
  margin-left:auto;
}

.justify-around div {
  margin-left: auto;
}
.justify-around div:last-child {
  margin-right: auto;
}

<div class="flex justify-start">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flex justify-end">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flex justify-between">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flex justify-around">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Прямая демонстрация в IE11: https://jsbin.com/rapituduvi/1/edit?html, css, вывод