Блог

У меня есть 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>  

justify-content: center; не центрирует контейнер, он центрирует элементы внутри него. Если вы удалите это из своего CSS для ul , я вижу именно то, что, как я полагаю, вы описываете. В качестве альтернативы вы могли бы использовать justify-content: space-between; или justify-content: space-evenly; для получения аналогичных результатов.

Если у вас возникли проблемы с его переполнением по горизонтали (чего не должно быть), вы можете установить max-width: 100%; на ul , и это должно быть решено. Трюк с ::after псевдоэлементом не нужен.