javascript - Flexbox 项目（隐藏和显示）修改我之前项目的对齐方式，我该怎么办？

Question

我有一个带有 display:flex 的 div，里面有 4 个项目，但最后一个项目是一个跨度，只有在按下按钮后才会显示，这个跨度以 display:none 开头。项目在 div 中垂直和水平居中。当我按下按钮时，跨度出现但改变了先前元素的位置。

这是以正确方式居中的前 3 个元素的图像，跨度显示：无

这是前 4 个元素的图像

正如你所看到的，前三个元素，当出现跨度时，它们向上和向左移动。

当 span 出现时，我想保持前 3 个元素的位置不变。我希望前三个元素像第一个图像一样居中，并且 span 出现在第三个元素下方但不移动其他元素。

我能做些什么？有什么建议么？

先感谢您。

HTML：

<div id="buy">
    <p>Prezzo: 39,10 €&lt;/p>
    <div id="quantityDiv"></div>
    <button id="button0">Aggiungi al carrello</button>
    <span id="messageAdd0"></span>
</div>

CSS：

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

#buy > * {
    margin: 0 auto;
}

#buy span {
    background: #24252A;
    display: none;
}

按下按钮时，JS 只使用 hide() 和 show() 作为 span。

标签： javascripthtmlcss

Answer 1

由于您不能justify-self: end;在不影响其他 flex 子元素的位置的情况下使用该特定元素 -
到目前为止，您可以做的最好的事情（除非出现更好的想法）是在父元素内部使用position:absolute该元素：top:100%position:relative

.product {
  display: flex;
}

.buy {
  position: relative; /* Add this one */
  margin-left: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.buy > * {
  margin: 0 auto;
}

.buy > .messageAdd {
  position: absolute;
  top: 100%;
  right: 0;
  white-space: nowrap;
  color: red;
}

<div class="product">
  <h1>Prodotto 1</h1>
  <div class="buy">
    <p>Prezzo: 39,10 €&lt;/p>
    <div class="quantityDiv"></div>
    <button class="button" disabled>Aggiungi al carrello</button>
    <span class="messageAdd">È stato raggiunto il limite di 5 biglietti!</span>
  </div>
</div>

另外，不要使用 ID 代替类。使用类。ID应该是唯一的！此外，在 SEO 方面，每个文档
不要使用超过一个。h1

修改您的 HTML！

您可以改为通过为产品规范引入父级来修改 HTML 标记：

.product {
  display: flex;
}
.buy {
  display: flex;
  flex-direction: column;
  margin-left: auto;
}
.buy-specs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.buy > * {
  margin-left: auto;
}
.buy-message {
  color: red;
}

<div class="product">
  <h1>Prodotto 1</h1>
  <div class="buy">
    <div class="buy-specs">
      <p class="buy-specs-price">Prezzo: 39,10 €&lt;/p>
      <div class="buy-specs-quantity"></div>
      <button class="buy-specs-add button" disabled>Aggiungi al carrello</button>
    </div>
    <span class="buy-message">È stato raggiunto il limite di 5 biglietti!</span>
  </div>
</div>