防止包装后伸缩盒项目收缩 [英] Prevent flex box item shrinking after wrap
本文介绍了防止包装后伸缩盒项目收缩的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
对于HTML
<section class="flex-container">
<div class="item"></div>
<div class="item"></div>
</section>
我定义了以下CSS
.flex-container {
display: flex;
flex-wrap: wrap;
min-height: 100vh;
.item {
background-color: #6f42c1;
flex: 3;
}
.item:nth-child(2) {
background-color: #0c5460;
flex: 5;
}
@media (max-width: 768px) {
.item:first-child {
flex-basis: 100%;
}
.item:nth-child(2) {
flex-shrink: 0;
}
}
}
当视口大于768像素时,我将获得所需的行为,即两个div占据了屏幕的一部分,请参见下文
When the viewport is greater than 768px I get the desired behaviour, i.e., two divs taking up a proportion of the screen, see below
但是当我降到768px以下时,我的第二项(绿色div)消失了
but when I drop below 768px, my second item (green div) disappears
在包裹弹性物品后,如何调整css以保持成比例的div?
How can I adjust my css such that I maintain proportioned divs after the flex items have wrapped?
推荐答案
只需更改方向:
body {
margin:0;
}
.flex-container {
display: flex;
flex-wrap: wrap;
min-height: 100vh;
}
.item {
background-color: #6f42c1;
flex: 3;
}
.item:nth-child(2) {
background-color: #0c5460;
flex: 5;
}
@media (max-width: 768px) {
.flex-container {
flex-direction: column;
}
}
<section class="flex-container">
<div class="item"></div>
<div class="item"></div>
</section>
这篇关于防止包装后伸缩盒项目收缩的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文