html – flexbox检测Flex包装时是否可以检测?
发布时间:2020-12-14 16:45:30 所属栏目:资源 来源:网络整理
导读:我希望摆脱媒体查询,只是使用flexbox来解决我的问题,但我不确定这是否可行.随着窗口变小,我希望列缩小,直到它们达到最小宽度.一旦它们击中,中间的列将跳下来进行包裹. 我认为我的问题可以归结为这个问题 – 当它包裹时,它可以检测到吗?如果是这样,我可以提
我希望摆脱媒体查询,只是使用flexbox来解决我的问题,但我不确定这是否可行.随着窗口变小,我希望列缩小,直到它们达到最小宽度.一旦它们击中,中间的列将跳下来进行包裹.
我认为我的问题可以归结为这个问题 – 当它包裹时,它可以检测到吗?如果是这样,我可以提示它改变严格CSS的包装项目的顺序吗? 这是我尝试使用媒体查询完成的codepen. .wrapper { display: flex; justify-content: center; margin: 5px; flex-wrap: wrap; } .red { background-color: red; height: 240px; margin: 5px; width: 500px; order: 0; } .yellow { background-color: yellow; margin: 5px; height: 240px; min-width: 240px; max-width: 400px; flex: 1; order: 1; } .blue { background-color: blue; height: 240px; margin: 5px; min-width: 350px; max-width: 400px; flex: 1; order: 2; } @media (max-width:1130px) { .yellow { order: 4; } } <div class="wrapper"> <div class="red"></div> <div class="yellow"></div> <div class="blue"></div> </div> 解决方法
没有. 在CSS中,一旦浏览器在初始级联上呈现页面,它就不会在元素换行时重排文档.结果,父元素不知道他们的孩子什么时候换行. 这就是为什么容器在包装后不会收缩以适应其内容的原因. 这就是您需要媒体查询或JavaScript的原因. 以下是一些更多细节: > Make container shrink-to-fit child elements as they wrap (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |