Отдельный вопрос, чтобы найти окончательное решение, которое мы почти нашли здесь (большое спасибо всем, кто там ответил).
У меня есть неупорядоченный список. Список может иметь любое количество элементов внутри, он динамический. Список стилизован таким образом, что в каждой строке по 3 элемента списка (каждый элемент занимает 1/3 ширины родителя).
Решения, предложенные в другом вопросе, о котором я упоминал выше, имеют 2 проблемы:
justify-content: flex;
, когда у нас есть 5 элементов в списке, 4-й и 5-й элементы прыгают в противоположные углы, в то время как они должны придерживаться левого.Это то, что мне нужно. Так должен выглядеть список, если у нас есть 3 элемента списка:
И это иллюстрация, чтобы пояснить, что должно произойти, если у нас есть 4 или более элементов в списке:
И это код, который я пробовал (спасибо за помощь в другом посте):
.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>
Используйте псевдоэлемент :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>