如果其中一些元素具有“display:none”，我如何使元素与“justify-content: space-between”保持一致？

Question

代码笔在这里。

如果其中一些应用了“display:none”，我如何更改 CSS 样式以将“LEFT”、“CENTER”和“RIGHT”保持在它们的位置？

.rows {
  display: flex;
  justify-content: space-between;
  height: 4em;
  align-items: center;
}

.row3 .l,
.row3 .c {
  display: none
}

<div class="rows row3">
  <div class="l">
    LEFT
  </div>
  <div class="c">
    CENTER
  </div>
  <div class="r">
    RIGHT
  </div>
</div>

谢谢！

Answer 1

不要使用display属性来隐藏元素，而是使用visibility: hidden. 这将防止可见元素从其在布局中的位置移动。

您也可以使用opacity属性来达到相同的结果。

usingvisibility: hidden将阻止元素响应指针事件，而 usingopacity: 0不会阻止元素响应指针事件。使用任何看起来更适合您的用例的东西。

以下代码片段显示了一个示例，其中左侧元素被隐藏，而居中和右侧对齐的元素显示在布局中的正确位置。

.rows {
  display: flex;
  justify-content: space-between;
  height: 4em;
  align-items: center;
}

.row3 .l {
  visibility: hidden;
}

<div class="rows row3">
  <div class="l">LEFT</div>
  <div class="c">CENTER</div>
  <div class="r">RIGHT</div>
</div>