包裹时的弹性项目，更改边距和填充答案

【问题标题】：Flex item when wrap, change margins and paddings包裹时的弹性项目，更改边距和填充
【发布时间】：2021-04-14 02:09:48
【问题描述】：

当一个弹性项目被包装时，有没有办法改变边距或内边距？

这是我的问题：

我有一个 div 'buy' with margin: 0 auto，因为我希望它总是在右边，但是当这个 div 被包装时，我想改变那个边距。

换行前：

包装后：

这是我的代码：

HTML：

.container {
  cursor: grab;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 70%;
  background: #24252A;
  margin: 20px auto;
  height: auto;
  border-radius: 5px;
  box-shadow: 3px 3px 3px 3px #0d0d0d;
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  margin-right: 10px;
}

#imgBox {
  width: 200px;
  height: 200px;
  object-fit: contain;
  align-self: flex-start;
  margin-top: 10px;
}   

#content {
  max-width: 50%;
  min-width: 200px;
  margin-top: 10px;
}

#buy {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.buy-specs {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#buy > * {
  margin-left: auto;
}

<div id="container0" class="container" draggable="true" ondragstart="drag(event)">
    <div id="imgBox">
        <img src="../img/pinguini.jpg" alt="" draggable="false">
    </div>
    <div id="content">
        <h2>Pinguini Tattici Nucleari</h2>
            <p id="luogo">Torino - Pala Alpitour</p><p>04/10/2021 | 21:00</p>
    </div>
    <div id="buy">
        <div class="buy-specs">
            <p>Prezzo: 39,10 €</p>
            <div id="quantityDiv"><p>Quantità: </p>
        </div>
        <button id="button0">Aggiungi al carrello</button>
    </div>
</div>

谢谢！

【问题讨论】：

如果你使用flex-grow: 1而不是使用边距怎么办，这样它是动态的，检查这个：stackoverflow.com/questions/40978400/margin-with-flex-wrap。这有帮助吗？
我可以使用 flex-grow: 1，但它的效果和 margin 一样。 div 购买始终保持在正确的位置
没有。没有检测何时发生换行的 CSS 方法
flex-grow 有什么问题？

标签： html css

【解决方案1】：

另一种方法可能是让中间的一个增长并推动最后一个。

最后一个可以接收：margin:auto 如果单独在其行上，则居中：

可能的例子：

.container {
  cursor: grab;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 70%;
  background: #24252A;
  margin: 20px auto;
  height: auto;
  border-radius: 5px;
  box-shadow: 3px 3px 3px 3px #0d0d0d;
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  margin-right: 10px;
}

#imgBox {
  width: 200px;
  height: 200px;
  margin:auto;
  margin-top: 10px;
}

#content {
  flex-grow: 1;
  min-width: 200px;
  margin-top: 10px;
}

#buy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin:auto;/* optionnal to center if alone*/
}

.buy-specs {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#buy>* {
  margin-left: auto;
}

<div id="container0" class="container" draggable="true" ondragstart="drag(event)">
  <div id="imgBox">
    <img src="https://dummyimage.com/200/349&text=pinguini" alt="" draggable="false">
  </div>
  <div id="content">
    <h2>Pinguini Tattici Nucleari</h2>
    <p id="luogo">Torino - Pala Alpitour</p>
    <p>04/10/2021 | 21:00</p>
  </div>
  <div id="buy">
    <div class="buy-specs">
      <p>Prezzo: 39,10 €</p>
      <div id="quantityDiv">
        <p>Quantità: </p>
      </div>
      <button id="button0">Aggiungi al carrello</button>
    </div>
  </div>

请注意，如果单独站在一排，第一个最后一个可以居中：

【讨论】：