Justify content start если строка не заполнена

#html #css #css3 #вёрстка #flexbox

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

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



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

.child {
  width: 24%;
  height: 50px;
  background: red;
  margin-bottom: 20px;
  color: white;
}

  

  

  

  

  

  
last element





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

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

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

Ответы

Ответ 1

Если вы хотите, чтобы элементы шли один за другим с одинаковыми промежутками — не
обязательно использовать 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;
}

  

  

  

  

  

  
last element