如何解决flexbox中是否有东西,以便当容器的子代溢出容器时,他们转到另一行?
我有一个父容器:
.flex-container {
padding: 0;
margin: 0;
border: 2px solid silver;
display: flex;
}
在它里面,我有2个div,它们的大小相同,并且始终在同一行上。
.flex-item {
background: tomato;
height: 100px;
min-width:300px;
margin: 10px;
}
每个子div都具有这些属性。
每个div的min-width
是300px
,所以当屏幕很小并且divs
的宽度溢出到父容器时,我希望div
超过了要显示在另一个下方的父级宽度。
我认为该解决方案将使用mediaquery
完成,但是也许flexbox
还有另一个更优化的解决方案,这就是为什么我问这个问题(例如,使用flex-wrap
我实现了将超过父级宽度的div放在下面,但是当分辨率较大时,它不再位于同一行上。非常感谢
.flex-container { 填充:0; 边距:0; 边框:2px纯银; 显示:flex; }
这是我的完整代码:
<div class="flex-container ">
<div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto,repellat fugit quisquam reprehenderit recusandae alias ut,magni quis cumque earum at laborum,consectetur voluptas.</div>
<div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto,consectetur voluptas.</div>
</div>
https://jsfiddle.net/2x8yLhu0/
解决方法
.flex-container {
padding: 0;
margin: 0;
border: 2px solid silver;
display: flex;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
height: 100px;
min-width:300px;
margin: 10px;
flex: 0;
}
您可以在容器类中添加flex-wrap:wrap。 但是在这种情况下,您应该将其添加到flex-item类中;
,将flex-wrap:wrap;
添加到.flex-container
。
那么您可能想在max-width
上添加.flex-item
,否则当它们扩展整个宽度时,它们将永远位于彼此的顶部。
.flex-container {
padding: 0;
margin: 0;
border: 2px solid silver;
display: flex;
flex-wrap:wrap; /* Add this so they go on top of each other */
justify-content: space-evenly; /* Center boxes,evenly spaced out in div */
}
.flex-item {
background: tomato;
height: 100px;
min-width:300px;
max-width:500px; /* Add this so they don't stretch full width */
margin: 10px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。