0

Хотелось как в гриде. Чтобы сам флех-контейнер было по центру или например если justify-content:space-between был равномерный отступ между блоками, но на следующем ряде все начались вначале как flex-start. Ну те-кто работали с гридом думаю меня понимает. Донес как смог.

Вот код -->

.container {
  max-width: 1170px;
  margin: 0 auto;
}

.list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.list__item {
  width: 250px;
  height: 200px;
  background-color: red;
}
<div class="container">
  <div class="list">
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
  </div>
</div>

а хотелось бы сделать вот так но на flex-e

.container {
  max-width: 1170px;
  margin: 0 auto;
}

.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 30px;
  justify-content: space-between;
}

.list__item {
  width: 100%;
  height: 200px;
  background-color: red;
}
<div class="container">
  <div class="list">
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
  </div>
</div>

1
  • Не понимаю прикола, людям дали удобный инструмент grid, а они вечно пытаются сделать через одно место не подходящим инструментом. 30 мар в 18:38

2 ответа 2

0

а хотелось бы сделать вот так но на flex-e

Предложу такой вариант...

.container {
  max-width: 1170px;
  margin: 0 auto;
}

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
.list::after {
  content: "";
  flex: auto;
}

.list__item {
  width: 250px;
  height: 200px;
  background-color: red;
}
<div class="container">
  <div class="list">
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
  </div>
</div>

2
  • НЕ, следующий ряд должен начаться сначала. Тут две элементы ушли в две стороны
    – Dias
    30 мар в 9:40
  • @Dias, добавил в стилях...
    – ksa
    30 мар в 9:46
0

Думаю, это как раз тот случай, когда grid справляется лучше, чем flex. Даже не уверен, что это можно реализовать на флексах без костылей, т.к у flex нет такого понятия, как отдельная "строка".

Единственное, что смог придумать -

.container {
  max-width: 1170px;
  margin: 0 auto;
}

.list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.list__item {
  min-width: 150px;
  height: 200px;
  background-color: red;
  margin: 30px;
  flex-grow: 1;
}
<div class="container">
  <div class="list">
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
    <div class="list__item"></div>
  </div>
</div>

Ваш ответ

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

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