Question

进一步扩大这个最近的问题：

When using `nowrap` within a flex row, avoid pushing the last elements off the screen

我正在努力理解为什么只有一个flex父级 - 破坏了引用问题中建议的完美布局。

预期的行为：文本将被剪切，为远端的表情符号提供空间。没有水平滚动。

请尝试打开和关闭flex属性以了解行为。

另外，请注意理解包装柔性会破坏布局的原因，这是我在这个问题中的主要目标。所以解决它是不够的。

有没有办法解决这种行为而没有像flex-direction: column这样的奇怪解决方案？

＆＃13;

body {
  margin: 0;
}

.single-flex {
  display: flex;
  justify-content: space-between;
}

span {
  white-space: nowrap;
  overflow: hidden;
}

.icon {
  flex: 0 0 auto;
}

＆＃13;

<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"></span>
    <span class="icon"></span>
  </div>
</div>

＆＃13;

flex-shirnk在这里也没有任何效果。

Answer 1

从第一个div中删除style="display:flex"。

然后向第一个margin-left: auto添加.icon，以便在没有太多文字的情况下，红色圆圈位于右侧。

body {
  margin: 0;
}

.single-flex {
  display: flex;
  justify-content: space-between;
}

span {
  white-space: nowrap;
  overflow: hidden;
}

.icon {
  flex: 0 0 auto;
}
.push {
  margin-left: auto;
}

<div>
  <div class="single-flex">
    <span>hello hello </span>
    <span class="icon push"></span>
    <span class="icon"></span>
  </div>
</div>

<div>
  <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 </span>
    <span class="icon push"></span>
    <span class="icon"></span>
  </div>
</div>

使用flex-parent会破坏单项Flex布局

1 个答案: