javascript - 如何放置唯一的弹性项目,就好像有下一个一样?
问题描述
我有一个 flexbox 行,它可以有一个或两个项目,但是当只有一个时,我需要对齐它,就好像它的兄弟存在一样。我尝试使用 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
,但它看起来像一个糟糕的解决方法
解决方案
当一行没有“关闭”时,它在语义上仍然有一个关闭的属性,但它的值为 null。因此,从语义上讲,我希望“关闭”的标记仍然存在。
此外,您拥有的是二维布局。换句话说,它是一个网格。如果你使用网格布局,你可以省略“关闭”的标记,它的网格轨道仍然存在。
tl;博士使用grid
而不是flex
因为它是 2D 而不是 1D 布局。
推荐阅读
- python - 如何使用 python 从我的 CSV 中捕获打印数据
- python - 使用 psycopg2 和 pandas 处理错误查询产生的错误
- android - 如果从不可暂停的块中调用,Android 协程范围会丢失
- php - 使用查询mysql php插入多个数据
- python - 尝试将数据从excel文件导入RDS MySQL表,插入时间过长
- c# - .Net Core Azure AD Cloud 如何获取登录用户并访问他们的 Azure AD 安全组以确定他们是否在一个组中
- spring - 当我注销并尝试转到学生/列表时,Bean 属性“principal.username”不可读或具有无效的 getter 方法
- logstash - 如何编写弹性聚合以在 grafana 上绘制 VM 的 CPU 百分比使用情况?
- javascript - 随机显示 webms
- java - 将 JButton ActionListener(在一个 *.java 文件中)添加到另一个 *.java 文件中的按钮不起作用