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

【问题标题】：How do you expand a FlexBox item to full screen without moving the other Flex items?如何在不移动其他 Flex 项目的情况下将 FlexBox 项目扩展到全屏？
【发布时间】：2017-06-03 04:09:29
【问题描述】：

我有一个 flexbox 布局的盒子。单击这些框时，它们会展开为全屏。

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

这是一个向你展示我在说什么的小提琴 fiddle

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

我尝试将所有未点击的卡片设置为“display:none”；但这并没有解决任何一个问题。我还尝试在卡片展开时将容器更改为“显示：块”，并在未展开时将容器更改为 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');
        });*/
    }
});

【问题讨论】：

很难给出一个通用的解决方案。你能多解释一下你对 flexbox 的使用吗？ - 不同的元素尺寸 - 不同的元素数量 - 不同的布局 ....
元素的数量是唯一会变化的东西。这些卡片的尺寸是固定的，而且它们的尺寸都是一样的@vals 你看看我的小提琴了吗？

标签： css responsive-design flexbox css-animations

【解决方案1】：

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

flex:1 0 33vh;

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

flex:0.00001;

（有人说少量比 flex:0; 效果更好）。这会将除被点击的卡片之外的所有卡片设置为 0 高度（或宽度，视情况而定），并且被点击的卡片将展开以填充视口的总高度。如果您将溢出隐藏和过渡添加到卡片，您就是黄金。

【讨论】：