Как удалить пустое место после переноса во Flex-box

Рейтинг: 0Ответов: 1Опубликовано: 11.01.2023

Как убрать пустое пространство в конце "Строки" в Flex-box? Планируется изменение размера ячеек, поэтому надо чтобы "Box" подстраивался под размер контента внутри себя.

.Box {
  background-color: darkgoldenrod;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.card {
  height: 20vh;
  width: 30vw;
  background-color: cyan;
}
<div class="Box">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Код CodePen: https://codepen.io/wawww/pen/zYLwKRO

Что нужно удалить

css html flexbox
Источник: Stack Overflow на русском

Ответы

▲ 0

Во-первых, размер flex-элементов должен быть относительный (резиновый, в процентах), чтобы они могли растягиваться и заполнять свободное пространство.

.card {
  /* 3 cols */
  width: calc(100% / 3);
}

Во-вторых, чтобы сетка хорошо выгляделя при любой ширине экране, нужно использовать медиа-запросы, чтобы подстраивать кол-во "колонок" сетки под размер экрана (на больших хоть 8, хоть 12; а вот на смартфонах лишь 1, максимум 2).

/* md+, tablets/landscape phones */
@media screen and (min-width: 768px) {
  .col-md-4 {
    /* 4 cols */
    width: 25%;
  }
}

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

.container {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

В-четвёртых, почему бы не использовать фреймворк?

UPD 12/01/2023:

Окей, я немного поигрался со свойствами и нашёл это. По мне решение не очень, но если не хочется хардкодить кол-во колонок вообще, тогда вот:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-bg-blue > .card {
    background-color: steelblue;
}
.card {
    flex-grow: 1;
    min-width: 10rem; /* Or... whatever */
    max-width: 100%; /* Or... whatever */
    aspect-ratio: 1/1; /* Just an example */
}
<div class="flex-container card-bg-blue">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>