html - 如果其中一些元素具有 "justify-content: space-between"，我如何保持元素与 "display:none"对齐？

Question

CodePen这里。
如果其中一些应用了“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属性以达到相同的结果。
使用 visibility: hidden将阻止元素在使用 opacity: 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>