css - 使用 transform 缩放 flexbox 子元素会留下空白空间
问题描述
我有一个有 5 个直接孩子的 flexbox。第一列和最后一列 (.colonnade__column) 应缩放为零(而不是display: none
)。完成后,内容按预期缩放,但保留空间。所以下一个/上一个元素不会移动。
我尝试调整列的子元素的大小并使列本身更加灵活,但我陷入了死胡同……</p>
HTML
<div class="colonnade">
<aside class="sidebar colonnade__column alpha">
<div class="">
NAVI
</div>
</aside>
<label class="colonnade__trigger alpha" for="colonnade-alpha">
<span class="label">
Show Navigation
</span>
</label>
<main class="main" id="main">
</main>
<aside class="sidebar colonnade__column omega">
<div class="">
CART
</div>
</aside>
<label class="colonnade__trigger omega" for="colonnade-omega">
<span class="label">
Show Cart
</span>
</label>
</div>
CSS
.colonnade {
display: flex;
}
.colonnade__column {
padding: 1em;
width: 20%;
min-width: 16em;
max-width: 20em;
/*display: none;*/
transform: scaleX(0);
transition: transform .3s;
background: #ccc;
}
.colonnade__column.alpha {
transform-origin: 0 0;
}
.colonnade__column.omega {
transform-origin: 100% 0;
}
.colonnade__state.alpha:checked ~ .colonnade__column.alpha,
.colonnade__state.omega:checked ~ .colonnade__column.omega {
/*display: block;*/
transform: scaleX(1);
}
看看codepen。该行为由带有垂直文本的浅灰色区域触发。
解决方案
Temani 的评论是正确的:transform
只是视觉效果,不影响布局。布局是在应用转换之前计算的。
相反,您可以通过使用 flexbox 属性来实现此效果:
.colonnade {
display: flex;
}
.colonnade__column {
flex: 0 1 0; /* Shorthand for: flex-grow, flex-shrink, flex-basis */
padding: 1em 0; /* Remove left/right padding when columns are hidden */
transition: all .3s;
background: #ccc;
}
.colonnade__state.alpha:checked ~ .colonnade__column.alpha,
.colonnade__state.omega:checked ~ .colonnade__column.omega {
flex: 1 0 20%;
padding-left: 1em;
padding-right: 1em;
}
此处更新演示:https ://codepen.io/wiiiiillllllll/pen/pZvLzj 。
推荐阅读
- auth0 - 如何设置 Auth0“更改电子邮件脚本”设置
- python - 如何在 python 中的多行注释函数中舍入数字?
- node.js - Facebook API:无法上传视频缩略图
- powershell - 使用 Powershell 从文件名中删除前导零
- java - 在 Spring Boot 2.4 中未按正确顺序实例化 Controller Advice bean
- python - 用 Pandas 或 Pyspark 用两列表示的关系展平“树”
- streaming - 自适应比特率流协议(适用于任何数据)
- php - 发布后删除的 PHP 会话变量
- java - Nexus 代理纱线注册表
- ios - 如何正确地为自定义进度条设置动画(swift)?