使用flex-parent会破坏单项Flex布局
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用flex-parent会破坏单项Flex布局相关的知识,希望对你有一定的参考价值。
进一步扩大这个最近的问题:
When using `nowrap` within a flex row, avoid pushing the last elements off the screen
我很难理解为什么有一个flex父 - 破坏了引用问题中建议的其他完美布局。
预期的行为:文本将被剪切,为远方的表情符号提供空间。没有水平滚动。
请尝试打开和关闭flex
属性以了解行为。
此外,请注意理解包装柔性为何会破坏布局,这是我在这个问题中的主要目标。所以解决它是不够的。
有没有办法解决这种行为没有奇怪的解决方案,如flex-direction: column
?
body {
margin: 0;
}
.single-flex {
display: flex;
justify-content: space-between;
}
span {
white-space: nowrap;
overflow: hidden;
}
.icon {
flex: 0 0 auto;
}
<div style="display:flex">
<div class="single-flex">
<span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
<span class="icon">以上是关于使用flex-parent会破坏单项Flex布局的主要内容,如果未能解决你的问题,请参考以下文章
fieldset 在 angularjs-material 中破坏了我的 flex 布局
带有水平滚动条的 pre/code 元素破坏了 Firefox 上的 flex 布局