1

К примеру, следующие блоки:

div.flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
div.flex > div {
    width: 30%;
    border: 1px solid #000;
    height: 10px;
    margin: 10px 0
}
<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Всё бы хорошо, но последнюю строчку хочется сделать так: введите сюда описание изображения

Каким образом это сделать? Конечно, можно добавить пустой элемент в конец:

div.flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
div.flex > div {
    width: 30%;
    border: 1px solid #000;
    height: 10px;
    margin: 10px 0
}
div.flex > span {
    width:30%;
}
<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <span></span>
</div>

но блоки могут быть адаптивными или фиксированной шириной, этот метод не пойдет

1
  • что думаете насчёт нового решения? 12 дек 2016 в 14:52

2 ответа 2

5

Для случая когда нужно симулировать добавление всего лишь одного элемента (как в примере) можно воспользоваться псевдоклассом для контейнера

.flex:after {
  content: "";
  width: 30%;
}

Также можно симулировать добавление двух элементов с помощью псевдокласса before, а также свойством order:

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

div.flex > div {
    width: 20%;
    border: 1px solid #000;
    height: 10px;
    margin: 10px 0
}

.flex:before {
  content: "";
  width: 20%;
  order: 99999;
}

.flex:after {
  content: "";
  width: 20%;
}
<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Но другого универсального решения скорее всего нет, не меняя того, что это flexbox и не используя JavaScript.

Поэтому если предложенное решение не подходит, то задавая пустые элементы у вас всё получится. Их может быть несколько и их можно удалять все или частично из потока отображения с помощью display: none; и, если нужно, media queries.

12
  • 1
    @Yuri, решение для конкретного случая возможно и найдется, в общем случае - вряд ли
    – Grundy
    11 дек 2016 в 8:07
  • Этот способ понятен, меня интересует, нет-ли более простого и красивого метода, может просто я не нашел какое-то правило..
    – Crantisz
    11 дек 2016 в 8:19
  • @Crantisz, для конкретного случая, вместо space-between можно использовать flex-start и промежутки регулировать с помощью margin. тогда пустые элементы не понадобятся
    – Grundy
    11 дек 2016 в 8:22
  • 1
    @VadimOvchinnikov, например расчетом количества нужных пустых элементов
    – Grundy
    11 дек 2016 в 8:25
  • 1
    @Grundy, придётся только так, решений больше нет
    – Yuri
    11 дек 2016 в 8:27
1

Есть отличный красивый и лаконичный способ. Применим немного знаний sass и получим замечательный пример

.container {
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.item {
  height: 80px;
  background-color: green;
  $gutter: 20px;
  $card-count: 3;
  width: calc(100% / #{$card-count} - #{$gutter} * (#{$card-count} - 1) / #{$card-count} );
  margin-right: $gutter;
  margin-bottom: 20px;

  &:nth-of-type(#{$card-count}n) {
    margin-right: 0;
  }
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

2
  • Ваш пример не адаптивный
    – Crantisz
    30 июл 2018 в 6:29
  • Для адаптивности по брейкпоинтам меняйте переменную $card-count 30 июл 2018 в 8:52

Ваш ответ

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

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