4 элемента в строке, но с пустым местом, если элементов меньше 4?

Я хочу знать, есть ли способ иметь 4 элемента в строке, но не растягивать строки с <4 элементами, чтобы заполнить пространство.

.item-container {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.item {
  display: flex;
  flex: 1 0 calc(25% - 40px);
  color: black;
  background-color: rgba(250, 250, 210);
  flex-direction: column;
  padding: 10px;
  margin: 10px;
  border-radius: 20px;
}
/* If there are 4 items it works well, but if there is 1-3 items they stretch to fill the space and look off. */

Добавьте соответствующий HTML-код, чтобы создать минимально воспроизводимый пример

— 28.08.2024 07:13

css flexbox

28.08.2024 07:04

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для этого отлично подойдет макет grid.

Следующее имущество:
grid-template-columns: repeat( auto-fill, minmax(calc(25% - 40px), 1fr) )

Создает новый столбец, если он помещается в макет. Минимальный размер столбца должен быть первым значением, указанным в minmax(), а максимальное значение — 1fr, что соответствует 1 столбцу.

ИМХО, следует использовать другое значение, кроме calc(25% - 40px), поскольку теперь это значение вычисляется относительно столбца. Вместо этого вы можете использовать gap, чтобы создать разрыв между элементами.

/* demo purpose */
body {
  display: flex;
  flex-direction: column;
}

.item-container {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(25%, 1fr) );
  max-width: 600px;
}

.item {
  display: flex;
  color: black;
  background-color: rgba(250, 250, 210);
  flex-direction: column;
  padding: 10px;
  margin: 10px;
  border-radius: 20px;
}

<div class = "item-container">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
</div>

<div class = "item-container">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
</div>

<div class = "item-container">
  <div class = "item"></div>
  <div class = "item"></div>
</div>

<div class = "item-container">
  <div class = "item"></div>
</div>

28.08.2024 08:06

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

Как центрировать содержимое навигации и обеспечить растягивание фона на всю ширину на больших экранах?

CSS Flexbox с компонентом, возвращающим TopBar и SideBar, и еще одним, возвращающим основной контент

Как синхронизировать наложенное изображение с основной формой круга?

Как я могу разделить содержимое <a> и <nav> в <header> моего HTML на левое и правое в одном родительском блоке с помощью CSS?

Проблема с размещением значка меню на странице мобильной версии

Проблема с макетом Flexbox: элементы не отображаются правильно в строках

Как центрировать горизонтальную линию по вертикали до первой строки многострочного абзаца с помощью CSS?

Почему этот компонент не заполняет всю ширину?

Как разбить гибкую строку на новую строку для динамических данных

Гибкий элемент выходит за границы гибкого контейнера

4 элемента в строке, но с пустым местом, если элементов меньше 4?

Ответы 1

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

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