How do you expand a FlexBox item to full screen without moving the other Flex items?

问题

I have a flexbox layout of boxes. The boxes expand to full screen when they are clicked on.

The problem is that when the box expands, it moves the other flex elements causing the animation to look jumpy. The flex layout also keeps the expanded box from touching the top of the screen.

Here is a fiddle to show you what I am talking about fiddle

Box 1 is actually pretty close to the desired effect, but it still jumps around like I described above.

I have tried setting all of the unclicked cards to "display:none"; But that didn't solve either of the issues. I also tried to change the container to "display: block" when a card is expanded, and back to flex when it's not. But again, no luck

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

回答1:

Old question i know, but you can achieve this by changing the flex property on the siblings (when an item is clicked). First you need to set their size with flexbox, then say your cards are:

flex:1 0 33vh;

33vh being a third of the total viewport height; youd need to on click change the siblings (not the clicked one) to:

flex:0.00001;

(some say a small amount works better than flex:0; for transitions). That will set all cards but the clicked one to 0 height (or width, depending on the case) and the clicked one will expand to fill the total height of the viewport. Should you add overflow hidden and transition to the cards, you are golden.

来源：https://stackoverflow.com/questions/41725208/how-do-you-expand-a-flexbox-item-to-full-screen-without-moving-the-other-flex-it