Css 如何在不移动其他Flex项目的情况下将FlexBox项目扩展到全屏？

我有一个灵活的盒子布局。单击框时，框会扩展到全屏

问题在于，当长方体展开时，它会移动其他flex元素，导致动画看起来跳跃。flex布局还可以防止扩展框接触屏幕顶部

这是一把小提琴，让你看看我在说什么

框1实际上非常接近期望的效果，但它仍然像我上面描述的那样跳跃

我已尝试将所有未勾选的卡片设置为“显示：无”；但这两个问题都没有解决。我还尝试在扩展卡时将容器更改为“display:block”，在不扩展时将容器更改为flex。但同样，没有运气

HTML

jQuery

$('.card').click(function(){
    if (!$(this).hasClass("flipped")) {
        $( ".face" ).addClass( 'off' );
        $( this ).children( ".face" ).removeClass( 'off' );
        $( this ).parent( ".cards" ).addClass( 'big' );
        $( this ).addClass('flipped');

        /*$('.card').each(function(){
            /*if(!$(this).hasClass('flipped')){
                $(this).addClass('noDisplay');
            }
        });*/
    } else {
        $('.container').css('display', 'flex');
        $( ".face" ).removeClass( 'off' );
        $( ".cards" ).removeClass( 'big' );
        $( this ).removeClass('flipped');

        /*$('.card').each(function(){
            $(this).removeClass('noDisplay');
        });*/
    }
});

---

我知道这个老问题，但您可以通过更改兄弟节点上的flex属性（当单击某个项目时）来实现这一点。首先，您需要使用flexbox设置它们的大小，然后说您的卡是：

flex:1 0 33vh;

33vh为总视口高度的三分之一；您需要单击将兄弟姐妹（而不是单击的兄弟姐妹）更改为：

---

（有人说，对于转换，少量的效果比flex:0更好）。这会将除单击的卡之外的所有卡设置为0高度（或宽度，取决于具体情况），单击的卡将展开以填充视口的总高度。如果您将溢出隐藏和转换添加到卡中，您将是金色的。

很难给出一个通用的解决方案。你能再解释一下你对flexbox的使用吗不同的元素尺寸-不同的元素数量-不同的布局…元素数量是唯一会变化的东西。这些卡片将有一个固定的大小，并且它们都将是相同的大小@VAL你有没有检查我的小提琴？

$('.card').click(function(){
    if (!$(this).hasClass("flipped")) {
        $( ".face" ).addClass( 'off' );
        $( this ).children( ".face" ).removeClass( 'off' );
        $( this ).parent( ".cards" ).addClass( 'big' );
        $( this ).addClass('flipped');

        /*$('.card').each(function(){
            /*if(!$(this).hasClass('flipped')){
                $(this).addClass('noDisplay');
            }
        });*/
    } else {
        $('.container').css('display', 'flex');
        $( ".face" ).removeClass( 'off' );
        $( ".cards" ).removeClass( 'big' );
        $( this ).removeClass('flipped');

        /*$('.card').each(function(){
            $(this).removeClass('noDisplay');
        });*/
    }
});

flex:1 0 33vh;

flex:0.00001;