如果某些元素具有“ display：none”，如何使元素与“ justify-content：space-between”对齐？

如何解决如果某些元素具有“ display：none”，如何使元素与“ justify-content：space-between”对齐？

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>

谢谢！

解决方法

使用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>