Проблеми та обмеження Flexbox
Завдання полягає в тому, щоб відцентрувати групу гнучких предметів та вирівняти їх за обертанням за лівим краєм. Але якщо в рядку немає фіксованої кількості ящиків і кожна коробка має фіксовану ширину, це на даний момент неможливо для flexbox.
Використовуючи код, опублікований у питанні, ми могли б створити новий flex-контейнер, який обгортає поточний flex-контейнер ( ul
), що дозволить нам відцентрувати за ul
допомогою justify-content: center
.
Тоді гнучкі елементи ul
можна вирівняти за лівим краєм justify-content: flex-start
.
#container {
display: flex;
justify-content: center;
}
ul {
display: flex;
justify-content: flex-start;
}
Це створює центровану групу гнучких елементів, вирівняних за лівим краєм.
Проблема цього методу полягає в тому, що при певних розмірах екрану буде проміжок праворуч ul
, через що він більше не буде виглядати по центру.
Це відбувається тому, що в гнучкому макеті (і, власне, CSS загалом) контейнер:
- не знає, коли елемент загортається;
- не знає, що раніше зайнятий простір тепер порожній, і
- не перераховує його ширину, щоб стиснути-обернути вужчий макет.
Максимальна довжина пробілу праворуч - це довжина гнучкого предмета, який контейнер очікував там знаходитись.
У наступній демонстрації, змінивши розмір вікна по горизонталі, ви зможете побачити пробіли, які з’являються та йдуть.
ДЕМО
Більш практичний підхід
Бажаний макет можна досягти без використання flexbox inline-block
та медіа-запитів .
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS
ul {
margin: 0 auto;
width: 1200px;
padding-left: 0;
font-size: 0;
}
li {
display: inline-block;
font-size: 18px;
list-style-type: none;
width: 150px;
height: 50px;
line-height: 50px;
margin: 15px 25px;
box-sizing: border-box;
text-align: center;
}
@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px; } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }
Наведений вище код відображає горизонтально відцентрований контейнер з вирівняними за лівим боку дочірніми елементами, як це:
ДЕМО
Інші варіанти