如何更改柔性包装？ [英] How to change flexbox wrap?

查看：117
本文介绍了如何更改柔性包装？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的应用程序中有一个动态渲染的卡片（从每张api调用的1-10张卡片）的响应式弹性盒子。它几乎正是我想要它做的除了它的包装方式。

假设我调整了10张卡片的大小， 4-4-2最后2张牌位于中间位置，我希望它能够包裹，所以最后2张牌从左侧开始，并且与上面的牌位相同。你怎么能做到这一点？



编辑进一步阐述：比方说我进一步调整1-1-1-1-1-1-1-1-1 -1，卡片应该居中，我仍然需要居中，但是如果它变成了4-4-2或者3-3-2等等，我想要最后的两张卡片从左侧包裹起来。

b
$ b

https://codepen.io/hyrosian/pen/EXKZJz

.card {text-align：center; box-shadow：0 1px 3px 0＃d4d4d5，0 0 0 1px＃d4d4d5;最大宽度：300px;保证金：2rem; padding-bottom：1rem;}。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 = 容器 > < div class =recipe-grid> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV>< / DIV>

如果要使用Flexbox和没有脚本，你可以创建 ghost 元素，所以他们填写最后一行的空间。

所以对于一个可能的列长度为4，你需要3 ghost 元素等等。



也可以使用伪元素，这会减少需要的 由2。



.card {text-align：center; box-shadow：0 1px 3px 0＃d4d4d5，0 0 0 1px＃d4d4d5;最大宽度：300px;保证金：2rem; padding-bottom：1rem;}。card：empty {width：300px; box-shadow：none;保证金：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 = 容器 > < div class =recipe-grid> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < div class =card>< / div> < div class =card>< / div> < div class =card>< / div> < / div>< / div>


$ b $ hr b

更新

由于您使用 justify-content：space-around 也可以这样做，在卡周围添加一个额外的包装，居中，然后通过媒体查询，使包装根据每个物品的数量请注意，由于在媒体查询中不能使用 CSS calc ，因此值基于 1rem 等于 16px ，所以第一个计算如下： 300px +（ 2rem * 2）= 728px 等等。因此，如果您的浏览器在 根 元素上的默认字体大小不过是 16px ，您可以将其设置为该值，或者重新计算查询值 

  .card {text-align：center; box-shadow：0 1px 3px 0＃d4d4d5，0 0 0 1px＃d4d4d5;最大宽度：300px;保证金：2rem; padding-bottom：1rem;}。container {padding-right：15px; padding-left：15px; margin-right：auto; margin-left：auto;}。recipe-grid {display：flex; flex-wrap：wrap; justify-content：flex-start;}。recipe-grid .card-wrapper {display：flex; justify-content：center; width：100％;} @ media（min-width：728px）{.recipe-grid .card-wrapper {width：50％; }} @media（min-width：1092px）{.recipe-grid .card-wrapper {width：33.333％;} }} @media（min-width：1456px）{.recipe-grid .card-wrapper {width：25％;} }} @media（min-width：1820px）{.recipe-grid .card-wrapper {width：20％;} }

< div class =container> < div class =recipe-grid> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < div class =card-wrapper> < div class =card> < img src =https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg> < H3>鸡蛋牛肉三明治< / h3> < p为H. 604千卡 - 完全纯素< / p> < / DIV> < / DIV> < / div>< / div>

最后，我也想提一下这些帖子，和可以-I-变化的对齐化内容值-depending- （这可能被认为是重复的），因为它有一个很好的解释Flexbox如何能够包装和中心项目的工作，以及比我给出的更多的解决方案。

I have a responsive flexbox box with dynamically rendered cards (from 1-10 cards rendered each api call) in my application. It Almost does exactly what i want it to do except the way it wraps.

Let's say i rendered 10 cards, if i resize screen so it turns into e.g. 4-4-2 the last 2 cards are centered, i want it to wrap so the last 2 cards start from the left and with equal spacing like the cards above. How can you do that?

EDIT to eloborate further: let's say i resize even further into 1-1-1-1-1-1-1-1-1-1 , the cards should appear centered, i still need the centering, but i want the last 2 cards to wrap from the left side if it turns into 4-4-2 or 3-3-2 etc.

https://codepen.io/hyrosian/pen/EXKZJz

.card {
    text-align: center;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    max-width: 300px;
    margin: 2rem;
    padding-bottom: 1rem;
}
.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>
</div>

解决方案

If to use Flexbox, and without script, you could create ghost elements, so they fill out the space on the last line.

So for a possible column length of 4, you need 3 ghost element and so on.

It is also possible to use the pseudo elements, which will decrease the needed ghost's by 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>

Updated

Since you use justify-content: space-around, you could also do like this, where you add an extra wrapper around the card, center it and then, with media queries, make the wrappers fill the line based on the amount of items per row.

Note, since one can't use CSS calc in the media query, the values are based on 1rem equals 16px, so the first is calculated like this: 300px + (2rem * 2) = 728px and so on. So if your browsers's default font size on the root element is anything but 16px, you either set it to that, or recalculate the query values

.card {
  text-align: center;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  max-width: 300px;
  margin: 2rem;
  padding-bottom: 1rem;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.recipe-grid .card-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
@media (min-width:  728px) { .recipe-grid .card-wrapper { width: 50%;     } }
@media (min-width: 1092px) { .recipe-grid .card-wrapper { width: 33.333%; } }
@media (min-width: 1456px) { .recipe-grid .card-wrapper { width: 25%;     } }
@media (min-width: 1820px) { .recipe-grid .card-wrapper { width: 20%;     } }

<div class="container">
  <div class="recipe-grid">
    
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
     
    <div class="card-wrapper">
      <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>
    
  </div>
</div>

Finally, I also want to mention these posts, how-to-center-a-flex-container-but-left-align-flex-items and can-i-change-the-justify-content-value-depending-on-the-number-of-elements-in (which might can be considered a duplicate to this), as it has a great explanation how Flexbox works when it comes to its ability to both wrap and center items, and some more solutions than the one's I gave.

这篇关于如何更改柔性包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆