Колоночный пробел flexbox для обернутых элементов

В настоящее время я использую возможность flexbox flex-wrap с space-between, чтобы красиво разделить обернутые элементы, но последняя строка не выравнивает свои элементы со столбцами.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width:450px;
  background-color:lightblue;
}
#container > div {
  width: 100px;
  height: 50px;
  background-color: red;
}
#container > div:nth-child(odd){
  height: 30px;
}

<div id = "container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

На данный момент элементы имеют одинаковую ширину (но контейнер не будет), но, возможно, не будет в будущем. Я стремлюсь к следующему:

Колоночный пробел flexbox для обернутых элементов

Я слишком многого жду от flexbox или есть простой альтернативный подход?

В любом случае, вам нужно не ряды, а столбцы. Felxbox работает только в 2-х направлениях. CSS-Grid может предлагать варианты, но это может быть немного сложно.

— 26.10.2018 16:49

@Paulie_D Это не делает вопрос не по теме, а не очень гостеприимный без попытки сначала решить (легко решаемую) проблему.

— 26.10.2018 16:52

@Paulie_D определение говорит, что вопросы в идеале должны иметь исходный код внутри них, но это предмет, который определяет не по теме. И, как говорится, часто так говорят.

— 26.10.2018 16:57

html css flexbox

26.10.2018 16:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

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

Как сделать так, чтобы элемент прилипал к нижней части экрана с помощью jQuery?

Как связать файл css в проекте asp.net?

Удаление пунктирной границы в поле выбора в FireFox без того, чтобы текст стал черным, когда поле выбора имеет темный фон

CSS-инъекция расширения Chrome с сохраненными пользователем значениями?

Как создать полноэкранное фоновое видео с некоторыми полями?

Magento: отображение параметров продукта на странице продукта в виде элементов списка в двух столбцах

Переход свойств CSS3 не работает при наведении курсора

Почему я вижу  как содержимое при доступе к правилам CSS в JS?

Как я могу создать макет flexbox с двумя строками, но с элементами, сгруппированными в два подстолбца?

Штрих-код не печатается правильно с использованием библиотеки JSBarcode

Колоночный пробел flexbox для обернутых элементов

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

Похожие вопросы