如果一些元素具有“display:none”，我如何使它们与“justify-content:space-between”对齐？

Question

这里有代码。

我如何改变CSS样式，以保持“左”，“中”和“右”的位置，如果其中一些有“显示:无”应用于他们？

null

.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>

null

谢啦！

Answer 1

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

您还可以使用opacity属性来实现相同的结果。

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

null

.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>