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

Question

我有一个弹性框布局。单击框时，它们将展开为全屏。

问题是当框展开时，它会移动其他 flex 元素，导致动画看起来跳跃。弹性布局还可以防止展开的框接触屏幕顶部。

这是一个小提琴，向您展示我在说什么小提琴

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

我尝试将所有未点击的卡片设置为"显示：无";但这并没有解决这两个问题。我还尝试在扩展卡片时将容器更改为"display：block"，并在不扩展时更改回 flex。但同样，没有运气

.HTML

<div id=container>
        <div class=cards> 
            <div class=card> 
                <div class="face front"> 
                    Card 1 Front
                </div> 
                <div class="face back"> 
                    Card 1 Back
                </div> 
            </div> 
        </div> 
        <div class=cards> 
            <div class=card> 
                <div class="face front"> 
                    Card 2 Front
                </div> 
                <div class="face back"> 
                    Card 2 Back
                </div> 
            </div> 
        </div>
        <div class=cards> 
            <div class=card> 
                <div class="face front"> 
                    Card 3 Front
                </div> 
                <div class="face back"> 
                    Card 3 Back
                </div> 
            </div> 
        </div>
        <div class=cards>
            <div class=card> 
                <div class="face front"> 
                    Card 4 Front
                </div> 
                <div class="face back"> 
                    Card 4 Back
                </div> 
            </div> 
        </div>
     </div>

.CSS

body {
    height:100vh;
    width:100vw;
    margin:0px;
}
.noDisplay{
    display: none;
}
#container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    position: relative;
    background: skyblue;
    height:100%;
    width: 100%;
    overflow: hidden;
    margin:auto;
}
.off {
    color: rgba(0, 0, 0, 0.0) !important;
    background: rgba(230, 230, 250, 0.0) !important;
    -webkit-transition: all 2s; /* Safari */
            transition: all 2s;
}
.cards {
    width: 300px;
    height: 300px;
    border-radius: 5px;
    margin-left: 25px;
    margin-right: 25px;;
    -webkit-perspective: 900px;
       -moz-perspective: 900px;
            perspective: 900px;
    -webkit-transition: all 1s; /* Safari */
            transition: all 1s;
}
.cards .card.flipped {
    -webkit-transform: rotatey(-180deg);
       -moz-transform: rotatey(-180deg);
            transform: rotatey(-180deg);
    height: 100%;
    z-index: 100;
}
.cards .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
-webkit-transition: all 1s; /* Safari */
        transition: all 1s;
}
.cards .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden ;
       -moz-backface-visibility: hidden ;
            backface-visibility: hidden ;
    z-index: 2;
    font-size: 2em;
    font-family: arial, sans-serif;
    text-align: center;
    -webkit-transition: all 0.5s; /* Safari */
            transition: all 0.5s;
}
.cards .card .front {
    position: absolute;
    background: tomato;
    z-index: 1;
}
.cards .card .back {
    -webkit-transform: rotatey(-180deg);
       -moz-transform: rotatey(-180deg);
            transform: rotatey(-180deg);
    background: gold;
}
.cards .card .front,
.cards .card .back{
    cursor: pointer;
}
.big {
    height:100%;
    width:100%;
    top: 0%;
    margin-left: 0%;
    margin-right: 0%;
    z-index:100;
}

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');
        });*/
    }
});

Answer 1

我知道的

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

flex:1 0 33vh;

33vh 是总视口高度的三分之一; 您需要在单击时将同级（而不是单击的同级）更改为：

flex:0.00001;

（有人说少量比flex：0更好;对于过渡）。这会将除单击的卡片之外的所有卡片设置为 0 高度（或宽度，具体取决于大小写），单击的卡片将展开以填充视口的总高度。如果你添加隐藏的溢出并过渡到卡片，你就是黄金。