如何更改flexbox wrap？

时间：2017-06-11 09:04:39

标签： css css3 flexbox

我的应用程序中有一个响应式弹性框，其中包含动态呈现的卡片（每个api调用1-10张卡片）。除了它的包装方式外，它几乎完全符合我的要求。

假设我渲染了10张牌，如果我调整屏幕大小，那么它会变成例如4-4-2最后2张牌是居中的，我希望它能够包裹，所以最后2张牌从左边开始，并且间距与上面的牌相同。你怎么能这样做？

编辑进一步阐述：让我说我进一步调整到1-1-1-1-1-1-1-1-1-1，卡片应该显示居中，我仍然需要居中，但我想要最后2张牌如果变成4-4-2或3-3-2等，则从左侧包裹。

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>

2 个答案:

答案 0 :(得分：5)

如果要使用Flexbox，并且没有脚本，则可以创建 ghost 元素，以便填写最后一行的空格。

因此，对于可能的列长度为4，您需要3 ghost 元素，依此类推。

也可以使用伪元素，这将使所需的 ghost 减少2。

＆＃13;
＆＃13; 
.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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

更新

由于您使用justify-content: space-around，您也可以这样做，在card周围添加额外的包装，将其居中，然后使用媒体查询，使包装器填充基于的行每行的项目数量。

注意，由于我们无法在媒体查询中使用CSS calc，因此值基于1rem等于16px，因此第一个计算如下：300px + (2rem * 2) = 728px等等。因此，如果 root 元素中的浏览器默认字体大小不是16px，则可以将其设置为该值，或者重新计算查询值

＆＃13;
＆＃13; 
.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%;     } }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

最后，我还想提一下这些帖子，how-to-center-a-flex-container-but-left-align-flex-items和can-i-change-the-justify-content-value-depending-on-the-number-of-elements-in（可能会被视为与此重复），因为它很好地解释了Flexbox如何工作能够包装和居中物品，以及比我给出的更多解决方案。

答案 1 :(得分：0)

按如下方式更改CSS：

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

如果需要，请在卡片上添加保证金。

相关问题
最新问题