Нужно гибкое решение для переноса 3 элементов списка в строку

Отдельный вопрос, чтобы найти окончательное решение, которое мы почти нашли здесь (большое спасибо всем, кто там ответил).

У меня есть неупорядоченный список. Список может иметь любое количество элементов внутри, он динамический. Список стилизован таким образом, что в каждой строке по 3 элемента списка (каждый элемент занимает 1/3 ширины родителя).

Решения, предложенные в другом вопросе, о котором я упоминал выше, имеют 2 проблемы:

  • Если мы используем justify-content: flex;, когда у нас есть 5 элементов в списке, 4-й и 5-й элементы прыгают в противоположные углы, в то время как они должны придерживаться левого.
  • Если мы уменьшим размер экрана, то почему-то вместо 3 элементов будет по 2 элемента в строке. И было бы хорошо, если бы эти 2 элемента в строке занимали 1/2 ширины родительского элемента, но они намного меньше.

Это то, что мне нужно. Так должен выглядеть список, если у нас есть 3 элемента списка: Нужно гибкое решение для переноса 3 элементов списка в строку

И это иллюстрация, чтобы пояснить, что должно произойти, если у нас есть 4 или более элементов в списке: Нужно гибкое решение для переноса 3 элементов списка в строку

И это код, который я пробовал (спасибо за помощь в другом посте):

.parent{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
  gap: 20px;  
  box-sizing: border-box;
  justify-content: space-between;
  background-color: lightgreen;
}
.child{
  flex-basis: 30%;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class = "parent">
  <div class = "child"> <span>1</span> </div>
  <div class = "child"> <span>2</span> </div>
  <div class = "child"> <span>3</span> </div>
  <div class = "child"> <span>4</span> </div>
  <div class = "child"> <span>5</span> </div> 
</div>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте псевдоэлемент :after для имитации невидимого дочернего элемента div, чтобы выравнивание элементов было фиксированным по левому краю. И медиа-запросы для отзывчивых. Проверьте фрагмент, чтобы получить некоторое представление.

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: 20px;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: lightgreen;
}

.parent::after {
  content: "";
  width: 30%;
  height: 0;
}

.child {
  flex-basis: 30%;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width : 1024px) {
  /* for tablet */
  .parent::after {
    width: 46%;
  }
  .child {
    flex-basis: 46%;
  }
}

@media only screen and (max-width : 768px) {
  /* for mobile */
  .parent::after {
    display: none;
  }
  .child {
    flex-basis: 100%;
  }
}
<div class = "parent">
  <div class = "child"> <span>1</span> </div>
  <div class = "child"> <span>2</span> </div>
  <div class = "child"> <span>3</span> </div>
  <div class = "child"> <span>4</span> </div>
  <div class = "child"> <span>5</span> </div>
</div>

Другие вопросы по теме