如何防止FlexBox元素的换行?它甚至可能吗?
我正在尝试使用带有以下标记的flexBox创建一个双列网格:
<div class="flex-container"> <div class="no-wrap">this should not wrap</div> <div class="can-wrap">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.</div> </div>
.no-wrap元素应该只有它”需要’那样宽,以便内部的所有文本都不会换行到第二行。 .can-wrap元素将占用剩余空间,并在需要时进行换行。
我正在使用这个CSS(免费提供prefrix):
.flex-container{ display:flex; } .no-wrap{ flex-basis:initial; }
我认为flex-basis:initial会阻止元素包裹行–https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
这是一个codepen:http://codepen.io/jshawl/pen/bknAc
我知道我可以修复.no-wrap元素的宽度,但是如何让它足够宽以防止换行?
.no-wrap元素的浮点等效值为:
.no-wrap{ display:block; float:left; /* be as wide as need be! */ }
解决方法
原文地址:https://www.jb51.cc/css/217959.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。