防止 flex box 项目在包装后收缩
詹姆斯·B
对于 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;
}
}
}
当视口大于 768px 时，我得到了所需的行为，即两个 div 占据了屏幕的一部分，见下文
但是当我低于 768px 时，我的第二个项目（绿色 div）消失了
如何调整我的 css 以便在 flex 项目包装后保持成比例的 div？
陪伴阿菲
只需改变方向：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
flex itemrenderer防止选择数据网格项目
- 2
如何防止display：flex项目清除先前的浮动？
- 3
为什么Flex-Box会通过包装程序溢出？
- 4
Flex Box出国了吗？
- 5
Flex-box伸出
- 6
与使用flex-flow的flex容器中的收缩相比，更喜欢收缩：行包装
- 7
防止带显示器的包装纸出现空白：flex
- 8
防止UICollectionView中的项目“包装”
- 9
Bootstrap 4 Flex Box网格
- 10
Flex Box响应式布局
- 11
IE的Flex box修复程序？
- 12
CSS Flex Box：如何在不损失flex项目高度的情况下将“ flex项目”垂直对齐到中间？
- 13
如何防止弹性项目收缩小于其内容？
- 14
如何防止Flex容器上溢/下溢？
- 15
如何防止Flex容器上溢/下溢？
- 16
Flex Box粘滞页脚内容溢出
- 17
Flex-box页脚元素居中
- 18
CSS Flex Box 无法正确对齐
- 19
使用 flex 和 border-box 等宽
- 20
通过 Flex Box 进行简单布局
- 21
React Native，Flex Box 有问题
- 22
Flex box 不是预期的结果反应原生？
- 23
Tailwind Flex Box Responsive Grid with Cards 问题
- 24
如何让我的 flex-box 按钮悬停？
- 25
Firefox不尊重Flex收缩
- 26
带y轴滚动的内部flex-box容器的flex-box粘性页脚
- 27
Flex-box：flex-shrink和flex-wrap无法正常工作
- 28
防止div内容包装
- 29
防止SPOOL的输出被包装
我来说两句