Javascript 如何将唯一的弹性项放置在'；下一个是什么？

我有一个flexbox行，它可以有一个或两个项目，但当只有一个项目时，我需要将其对齐，就好像它的兄弟项目存在一样。我尝试过使用flex basis、flex shrink和flex grow，但找不到解决方案。有没有一种方法可以不用条件呈现（样式化）就通过CSS来实现呢

在下面的代码段中，我需要使第二行中的“open…”字符串与第一行中的字符串完全对齐

.PointCard\u PointCard\u 1WRM8{
显示：网格；
网格模板列：重复（6，1fr）；
网格模板行：重复（2，1fr）；
网格间距：0；
差距：0；
网格模板区域：“标题”“内容”；
}
.PointCard_标头_uuu2acwz{
网格区域：标题；
}
.PointCardHeader\u PointCardHeader\u pm6oc{
--背景色：#E6F7FF；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景色：var（--背景色）；
填充：17px 30px；
}
.PointCardHeader_pointState_uu2bu6n{
显示器：flex；
gap:14px；
}
.PointCardHeader\u现金箱时间\u 1pfyW{
显示器：flex；
gap:36px；
}
.PointCardHeader\u现金箱TimeLabel\u\u 3CBmx{
显示器：flex；
对齐项目：居中；
gap:14px；
}
.PointCard\u content\uu 2tDUJ{
网格区域：内容；
}

第一点
开放时间：21:27
闭馆时间：21时40分
内容
第2点
开放时间：21:27
内容

一个快速解决方案可能是在“打开”下复制关闭的元素，并将“不透明度”设置为0，或将“可见性”设置为“隐藏”

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

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

---

tl；dr使用

grid

而不是

flex

，因为它是2D而不是1D布局。

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

所以不是这个

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

开的：
21:27

试试这个

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

开的：
21:27
（空）

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

.PointCardHeader_cashboxTime__1pfyW {
      width: 30ch;
}

---

是的，我想到能见度选项，但是认为它是不干净的，DunNO，如果它在语义上（逻辑上）有效，我明白了，它可以被认为是CSS术语中的结构间隔物。但奇怪的是隐藏的元素仍然需要文本。我只是将其设置为间隔或类似的线条高度。谢谢，为什么它是2D，而不是1D行？你怎么知道行在语义上有“closed”属性，这是什么意思？当我说它是2D时，我无意中忽略了“content”部分，所以我把整个事情看作一个表。那是我的错误。尽管如此，该方法仍应有效。至于语义，我设想一个表（如数据库中的表）包含三列：点名称、打开时间、关闭时间。即使关闭时间为空，也不意味着在数据结构（或表示布局）中没有它的位置。