如何放置唯一的弹性项目，就好像有下一个一样？答案

【问题标题】：How to place the only flex-item as if there's next one?如何放置唯一的弹性项目，就好像有下一个一样？
【发布时间】：2021-07-08 22:30:19
【问题描述】：

我有一个 flexbox 行，它可以有一个或两个项目，但是当只有一个时，我需要对齐它，就好像它的兄弟存在一样。我尝试使用 flex-basis、flex-shrink、flex-grow，但找不到解决方案。有没有办法不用条件渲染（样式），通过 CSS 来做到这一点？

在下面的 sn-p 中，我需要使第二行中的“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 的想法，但它看起来不是一个好的解决方法

【问题讨论】：

标签： javascript css flexbox

【解决方案1】：

一个快速的解决方法是复制打开下的封闭元素并将不透明度设置为 0 或将可见性设置为隐藏

【讨论】：

是的，我想到了可见性选项，但认为它不干净，不知道，如果它在语义上（逻辑上？）有效
是的，我明白了，它可以被认为是 CSS 术语中的结构间隔。但奇怪的是隐藏元素仍然需要文本。我只是将它设置为 SPACER 或具有类似线高的东西。

【解决方案2】：

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

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

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

【讨论】：

谢谢，为什么是二维的，而不是一维的？以及如何发现该行在语义上具有“封闭”属性，这是什么意思？
当我说它是 2D 时，我不小心忽略了“内容”部分，所以我把整个东西看作一张桌子。那是我的错误。也就是说，这种方法应该仍然有效。
至于语义，我想象一个表（就像在数据库中一样）有三列：点名称、打开时间、关闭时间。即使关闭时间为 null 也不意味着在数据结构（或演示布局）中没有它的位置。

【解决方案3】：

简单的方法可能是使用 HTML。在要移动的 div 旁边添加一个空 div。

所以不是这个...

    <div class="PointCardHeader_cashboxTime__1pfyW">
            <div class="PointCardHeader_cashboxTimeLabel__3CBmx">opened: 
            <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:27</span>
            </div>
    </div>

试试这个……

    <div class="PointCardHeader_cashboxTime__1pfyW">
            <div class="PointCardHeader_cashboxTimeLabel__3CBmx">opened: 
            <span class="PointCardHeader_cashboxTimeValue__Knjfp">21:27</span>
            </div>
            <div class="borderless-empty">(empty) 
      
            </div>
    </div>

【讨论】：

【解决方案4】：

发生这种情况是因为您的 flex 容器没有固定宽度，当其中一个项目被移除时，它会自动变小并与右侧对齐。如果你给你的 flexbox 添加一个字符大小的宽度应该没问题，类似于这样：

.PointCardHeader_cashboxTime__1pfyW {
      width: 30ch;
}

【讨论】：