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

看看代码笔。行为是由带有垂直文本的浅灰色区域触发的。

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。

使用transform缩放flexbox子级留出空白空间

1 个答案: