Как изменить flexbox wrap? - программирование

У меня есть отзывчивый flexbox ящик с динамически отображаемыми картами (от 1 до 10 карт, сделанных каждым вызовом api) в моем приложении. Он почти делает именно то, что я хочу, чтобы он делал, кроме способа обертывания.

Скажем, я отобразил 10 карт, если я изменяю размер экрана, чтобы он превратился, например. 4-4-2 последние две карты центрированы, я хочу, чтобы она была завершена, поэтому последние две карты начинаются слева и с равным интервалом, как и выше. Как вы можете это сделать?

РЕДАКТИРОВАТЬ еще дальше: скажем, я еще больше изменяю размер в 1-1-1-1-1-1-1-1-1-1, карты должны быть центрированы, мне все равно нужно центрирование, но я хочу последние 2 карты для переноса с левой стороны, если они превращаются в 4-4-2 или 3-3-2 и т.д.

Ответы

Ответ 1

Если использовать Flexbox и без script, вы можете создать элементы-призрак, чтобы заполнить пробел в последней строке.

Итак, для возможной длины столбца 4 вам нужен 3 элемента-призрак и т.д.

Можно также использовать псевдоэлементы, которые уменьшат необходимый призрак на 2.

.card {
    text-align: center;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    max-width: 300px;
    margin: 2rem;
    padding-bottom: 1rem;
}
.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around
}

<div class="container">
  <div class="recipe-grid">
    
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
     
    <div class="card">
      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
      <h3> Egg beef sandwich </h3>
      <p> 604 kcal - totally vegan </p>
    </div>
    

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    
  </div>
</div>

Ответ 2

Измените свой CSS следующим образом:

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start
}

Добавьте маржу к картам, если вам нужно.