如何在不移动其他Flex项目的情况下将FlexBox项目扩展到全屏？ [英] How do you expand a FlexBox item to full screen without moving the other Flex items?
问题描述
我有一个盒子的flexbox布局。点击框会全屏显示。
问题在于，当框展开时，它将移动其他flex元素，从而使动画看起来跳动。 Flex布局还可以防止展开的框接触到屏幕顶部。
这里有个小提琴用来向您展示我在说什么
小提琴
Box 1实际上很接近所需的效果，但是它仍然像我上面描述的那样跳跃。
我尝试将所有未单击的卡设置为 display：none ;但这并不能解决任何一个问题。我还尝试了在扩展卡时将容器更改为显示：阻止，而在未扩展时将容器更改为可弯曲。但是同样，没有运气
HTML
< div id =容器>
< div class = cards>
< div class = card>
< div class = face front>
卡1前
< / div>
< div class = face back>
卡1返回
< / div>
< / div>
< / div>
< div class = cards>
< div class = card>
< div class = face front>
卡2前
< / div>
< div class = face back>
卡2返回
< / div>
< / div>
< / div>
< div class = cards>
< div class = card>
< div class = face front>
卡3前
< / div>
< div class = face back>
卡3返回
< / div>
< / div>
< / div>
< div class = cards>
< div class = card>
< div class = face front>
卡4前
< / div>
< div class = face back>
卡4返回
< / div>
< / div>
< / div>
< / div>
CSS
body {
height：100vh;
width：100vw;
保证金：0px;
}
.noDisplay {
display：none;
}
#container {
display：flex;
flex-flow：行换行；
justify-content：center;
职位：相对；
背景：天蓝色；
身高：100％；
宽度：100％；
溢出：隐藏；
保证金：自动；
}
.off {
color：rgba（0，0，0，0.0）！important;
背景：rgba（230，230，250，0.0）！important;
-webkit-transition：全部2s; / * Safari * /
转换：全2；
}
.cards {
width：300px;
高度：300像素；
border-radius：5px;
margin-left：25px;
margin-right：25px ;;
-webkit-perspective：900px；
-moz-perspective：900px；
角度：900像素；
-webkit-transition：全1; / * Safari * /
转换：全1；
}
.cards .card.flipped {
-webkit-transform：rotationy（-180deg）;
-moz-transform：rotately（-180deg）;
transform：rotate（-180deg）;
身高：100％；
z-index：100；
}
.cards .card {
宽度：100％；
身高：100％；
-webkit-transform-style：3，preserve-3d;
-moz-transform-style：保留3d;
转换样式：preserve-3d；
-webkit-transition：全1; / * Safari * /
转换：全1；
}
.cards .card .face {
width：100％;
身高：100％；
头寸：绝对；
-webkit-backface-visibility：隐藏;
-moz-backface-visibility：隐藏;
背面可见性：隐藏；
z-index：2；
字体大小：2em;
字体家族：arial，sans-serif;
text-align：center;
-webkit-transition：全部0.5s; / * Safari * /
过渡：全部0.5秒；
}
.cards .card .front {
position：absolute;
背景：番茄；
z-index：1；
}
.cards .card .back {
-webkit-transform：rotationy（-180deg）;
-moz-transform：旋转（-180deg）;
transform：rotate（-180deg）;
背景：黄金；
}
.cards .card .front，
.cards .card .back {
光标：指针；
}
.big {
height：100％;
宽度：100％；
top：0％；
余量：0％；
保证金权利：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'）;
}）; * /
}
}）;
我知道这个老问题，但是您可以通过以下方法实现更改同级上的flex属性（单击某项时）。首先，您需要使用flexbox设置它们的大小，然后说您的卡片是：
flex：1 0 33vh;
33vh是视口总高度的三分之一；您需要点击将兄弟姐妹（而不是被点击的兄弟姐妹）更改为：
flex：0.00001;
（有人说，少量使用比flex：0更好；对于过渡）。这会将除了单击的卡以外的所有卡设置为0（或视情况而定的宽度）高度，然后单击的卡将展开以填充视口的总高度。如果您将隐藏的溢出内容添加到卡中并进行过渡，那么您会很高兴。
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');
});*/
}
});
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.
这篇关于如何在不移动其他Flex项目的情况下将FlexBox项目扩展到全屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
