如何更改flexbox包装？

小编典典

如何更改flexbox包装？

css

我的应用程序中有一个响应式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等，则从左侧缠绕卡。

.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>

阅读 575

2020-05-16

共1个答案

小编典典

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

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

也可以使用伪元素，这将使所需的虚数减少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>

更新

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

请注意，由于不能CSS calc在媒体查询中使用，因此值基于1remequals 16px，因此第一个值的计算方式如下：300px +(2rem * 2) = 728px依此类推。因此，如果您的浏览器在元素 上的默认字体大小 为 ，则可以将其设置为，或者重新计算查询值root 16px

.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>

最后，我还想提到这些帖子，如何将一个flex容器居中，但如何将flex项左对齐，并且可以根据需要更改内容值的合理性元素数量输入（可能被认为是重复的），因为它很好地解释了Flexbox在包装和居中项目方面的工作方式，以及比其更多的解决方案我给了。

2020-05-16