0

Ширина блоков фиксированная, они должны выравниваться по правому и левому краю, кроме блоков в последнем ряду. Пробовал :after, но так как блоков всегда может быть разное количество, например когда остается 2 или 3 в последнем ряду, то позиционируется не совсем правильно.

.content {
  padding: 50px;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 240px;
  height: 200px;
  background-color: #ccc;
}
<div class="content">
  <ul class="products">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

введите сюда описание изображения

2 ответа 2

0

Пример 1

.content {
  padding: 50px;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul:after {
  content: "";
  flex-basis: 240px;
}

li {
  width: 240px;
  height: 200px;
  background-color: #ccc;
}
<div class="content">
  <ul class="products">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Пример 2

.content {
  padding: 50px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, 240px);
  grid-gap: 20px;
  justify-content: space-between; 
}

li {
  width: 240px;
  height: 200px;
  background-color: #ccc;
}
<div class="content">
  <ul class="products">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

1
  • Спасибо Вам большое!
    – user324184
    Commented 11 июл. 2022 в 8:05
0

Если Вы уберёте свойство justify-content: space-between; у ul, то все блоки станут выводиться слева. Таким образов Ваши блоки всегда будут выровнены по левому краю

.content {
  padding: 50px;
}

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 240px;
  height: 200px;
  background-color: #ccc;
}
<div class="content">
  <ul class="products">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.