Css 使用transform缩放flexbox子级会留下空白

我有一个flexbox，有5个直接的孩子。第一列和最后一列（.colonnade_uu列）应缩放为零（而不是

显示：无

）。 完成后，内容将按预期进行缩放，但保留空间。因此下一个/上一个元素不会移动

我尝试过调整列的子元素的大小，并使列本身更灵活，但我陷入了死胡同

HTML

看看密码笔。beheaviour由带有垂直文本的浅灰色区域触发

---

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

---

此处更新了演示：。

转换只是一种视觉效果，它不会影响布局效果……这是最基本的。我正在寻找一个似乎已被删除的副本，这是一个片段，你能不能绝对定位你想要隐藏的那一个？还有，为什么不能使用显示为什么使用缩放隐藏它，你从来没有解释过？隐藏外部内容应该有一个很好的效果，没有什么比显示属性更好的了。此外，使用绝对定位，侧边栏可以覆盖主要内容，其大小取决于我的示例中的侧边栏。使用您的输入开始一天真的很有帮助。我将填充从列移动到子元素，因此现在只有flex属性的切换。看见

.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);
}

.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;
}