Я хочу знать, есть ли способ иметь 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. */
🤔 А знаете ли вы, что...
С помощью CSS можно создавать эффекты тени, градиенты и прозрачность для элементов.
Для этого отлично подойдет макет 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>