使用变换缩放 flexbox 子项留空 space

Question

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

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

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。

使用变换缩放 flexbox 子项留空 space

Scaling a flexbox child with transform leaves empty space

css

flexbox

css-transforms