Flexbox - Сетка на 4 колонки, последний элемент растягивается

Question

У меня есть простой макет Flexbox, как показано ниже ..

.container {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.item {
  background:teal;
  flex: 1 0 21%; margin:10px;
}

<div class="container">

  <div class="item">
    <h1>Item 1</h1>
    <p>
      This is some test content
    <p>
  </div>
  
    <div class="item">
    <h1>Item 2</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 3</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 4</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 5</h1>
    <p>
      This is some test content
    <p>
  </div>

</div>

Как получить 5-й предмет, занимающий только 1/4 столбца?Я пытаюсь создать сетку из 4 столбцов, но при наличии менее 4 я получаю эту проблему.

Answer 1

Удалите flex растут 1, иначе они будут расти, чтобы заполнить строку:

.container {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.item {
  background:teal;
  flex-basis:21%; /* just set the basis and leave grow and shrink as default */
  margin:10px;
}

<div class="container">

  <div class="item">
    <h1>Item 1</h1>
    <p>
      This is some test content
    <p>
  </div>
  
    <div class="item">
    <h1>Item 2</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 3</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 4</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 5</h1>
    <p>
      This is some test content
    <p>
  </div>

</div>

Answer 2

У меня также есть способ установить ширину, я не знаю, если это то, что вы хотите.

.container {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.item {
  background:teal;
  margin:10px;
  width: 21%;
}

<div class="container">

  <div class="item">
    <h1>Item 1</h1>
    <p>
      This is some test content
    <p>
  </div>
  
    <div class="item">
    <h1>Item 2</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 3</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 4</h1>
    <p>
      This is some test content
    <p>
  </div>


  <div class="item">
    <h1>Item 5</h1>
    <p>
      This is some test content
    <p>
  </div>

</div>

Answer 3

Настройка flex: 1 0 21% обязательно означает настройку

flex-grow: 1;
flex-shrink: 0;
flex-basis: 21%;

Таким образом, часть 21% на самом деле бесполезна, так как вы настроили ее на максимально возможное расширение в пределах своей части строки (flex-grow: 1). Чтобы это исправить, вам просто нужно установить flex-basis на любой процент, без установки других. Сделайте это, определив flex-basis: 21% напрямую.