javascript - 如何放置唯一的 flex 元素，就像有下一个元素一样？

Question

我有一个 flex 盒行，它可以有一个或两个元素，但是当只有一个元素时，我需要将其对齐，就好像它的同级存在一样。我尝试使用 flex-basis、flex-shrink、flex-grow，但找不到解决方案。有没有办法通过 CSS 实现无需条件渲染(样式化)的方法？

在下面的代码片段中，我需要使第二行中的“open...”字符串与第一行中的对齐方式完全相同。

.PointCard_pointCard__1WRM8 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 0 0;
  gap: 0 0;
  grid-template-areas: "header header header header header header" "content content content content content content";
}

.PointCard_header__2acWz {
  grid-area: header;
}

.PointCardHeader_pointCardHeader__pm6oc {
  --background-color: #E6F7FF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color);
  padding: 17px 30px;
}

.PointCardHeader_pointState__2Bu6n {
  display: flex;
  gap: 14px;
}

.PointCardHeader_cashboxTime__1pfyW {
  display: flex;
  gap: 36px;
}

.PointCardHeader_cashboxTimeLabel__3CBmx {
  display: flex;
  align-items: center;
  gap: 14px;
}

.PointCard_content__2tDUJ {
  grid-area: content;
}

<div class="container">
  <div class="PointCard_pointCard__1WRM8" data-testid="point-info">
    <div class="PointCardHeader_pointCardHeader__pm6oc PointCard_header__2acWz">
      <div class="PointCardHeader_pointState__2Bu6n">
        <h2 class="PointCardHeader_pointName__WneIP">Point1</h2>
      </div>
      <div class="PointCardHeader_cashboxTime__1pfyW">
        <div class="PointCardHeader_cashboxTimeLabel__3CBmx">opened: <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:27</span></div>
        <div class="PointCardHeader_cashboxTimeLabel__3CBmx">closed: <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:40</span></div>
      </div>
    </div>
    <div class="PointCard_content__2tDUJ">content</div>
  </div>
  <div class="PointCard_pointCard__1WRM8" data-testid="point-info">
    <div class="PointCardHeader_pointCardHeader__pm6oc PointCard_header__2acWz">
      <div class="PointCardHeader_pointState__2Bu6n">
        <h2 class="PointCardHeader_pointName__WneIP">Point2</h2>
      </div>
      <div class="PointCardHeader_cashboxTime__1pfyW">
        <div class="PointCardHeader_cashboxTimeLabel__3CBmx">opened: <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:27</span></div>
      </div>
    </div>
    <div class="PointCard_content__2tDUJ">content</div>
  </div>
</div>

另外，我想到了使用 visibility:hidden 的想法，但这看起来是一个糟糕的解决方法

Answer 1

当一行不是“关闭”时，它在语义上仍然具有关闭属性，但其值为 null。因此，从语义上讲，我希望“关闭”的标记仍然存在。

此外，您拥有的是二维布局。换句话说，它是一个网格。如果您使用网格布局，则可以省略“关闭”的标记，并且其网格轨道仍然存在。

tl;dr 使用 grid 而不是 flex 因为它是 2D 而不是 1D 布局。