4

При работе с Flexbox наткнулся на такую проблему. Как-то не получается решить его без изобретения нового велосипеда.

Вот сам пример.

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.child {
  width: 24%;
  height: 50px;
  background: red;
  margin-bottom: 20px;
  color: white;
}
<div class="flex">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">last element</div>
</div>

Вот, в примере, последний элемент с надписью last element хочу чтобы был слева, там, где тот же элемент предыдущей строки.

То есть если строка не заполнена, то элементы позиционировать слева.

Может кто-то поможет разобраться с этой проблемой.

2
  • не сильно понятен вопрос... хочу что бы был с лева, там где тот же элемент предыдущей строки. вот этот момент 24 янв 2019 в 19:32
  • В CSS, есть такая штука :empty, попробуйте что-нибудь придумать на основе неё.
    – De.Minov
    24 янв 2019 в 20:13

1 ответ 1

5

Если вы хотите, чтобы элементы шли один за другим с одинаковыми промежутками — не обязательно использовать justify-content: space-between.

В вашем примере элементы, шириной 24% расположены по 4 в ряд и равномерно распределены между границами flex-контейнера. Т.е. три отступа между ними — это 4% ширины контейнера.

Дело за малым — добавить отступ справа у всех элементов, кроме каждого четвёртого.

.flex {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 24%;
  height: 50px;
  background: red;
  color: white;
  margin: 0 calc(4% / 3) 20px 0;
}

.child:nth-child(4n+4) {
  margin-right: 0;
}
<div class="flex">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">last element</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.