使用 transform 缩放 flexbox 子元素会留下空白空间

Question

我有一个带有 5 个直接子级的 flexbox。第一列和最后一列 (.colonnade__column) 应缩放为零（而不是 display: none）。 完成后，内容按预期缩放，但保留空间。所以下一个/上一个元素不会移动。

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

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。该行为由带有垂直文本的浅灰色区域触发。

https://codepen.io/bitstarr/pen/WKbMjL

Answer 1

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/wiiiiilllllll/pen/pZvLzj。