#html #css #flexbox
#HTML #css #flexbox
Вопрос:
У меня есть 4 элемента в гибком контейнере. Я хочу по 3 в каждой строке. Я хочу, чтобы контейнер был центрирован — путем центрирования контейнера с помощью justify-content 4-й элемент во 2-й строке также был центрирован. Итак, я использовал трюк :: after, чтобы попытаться исправить это, но теперь 2-я строка не выровнена с 1-й строкой.
Проблема, на мой взгляд, заключается в том, что гибкий контейнер занимает больше ширины, чем элементы содержимого, что вынуждает меня центрировать его с помощью justify-content, что вызывает эту проблему.
Может ли это быть проще с использованием grid? если да, то каким образом? Мне нужна простая центрированная сетка видеороликов iframe YouTube, по 3 на строку с выравниванием последней строки по левому краю.
https://codepen.io/k4ir0s/pen/RdeejK
.section-vids ul {
list-style: none;
margin:0;
padding:0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.section-vids ul li {
padding: 20px;
}
.section-vids ul:after {
content: "";
flex: auto;
}
<div class="container" id="media">
<section class="section-vids">
<ul>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
<li><iframe width="560" height="315" src="https://www.youtube.com/embed/G1FFWgzk4vI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
</ul>
</section>
</div>
Комментарии:
1. каждый элемент flex имеет iframe шириной 560 пикселей — это делает невозможным размещение 3 в строке при меньшей ширине экрана…
Ответ №1:
justify-content: center;
не центрирует контейнер, он центрирует элементы внутри него. Если вы удалите это из своего CSS для ul
, я вижу именно то, что, как я полагаю, вы описываете. В качестве альтернативы вы могли бы использовать justify-content: space-between;
или justify-content: space-evenly;
для получения аналогичных результатов.
Если у вас возникли проблемы с его переполнением по горизонтали (чего не должно быть), вы можете установить max-width: 100%;
на ul
, и это должно быть решено. Трюк с ::after
псевдоэлементом не нужен.