html - 如何将 flexbox 中的这些 flex 元素保持为不同宽度的单行？

Question

我使用 jsx 生成一个 html 布局。但这应该无关紧要，因为这是一个 flexbox 问题。

代码如下:

return (
  <div className={styles.message}>
    Hello hello hello Today date is&nbsp;
    <span className={styles.date]}>
     27 mar 2017
    </span>.
    Bye Bye Bye Bye
  </div>
);

这是输出:

这是CSS:

.message {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.date {
  color: #2AAEDF;
}

但是，当我将页面调整为较窄宽度时，文本变为

我试图将文本“hello...”和“bye...”包含在 span 元素中，但它不会使它们表现得像 inline元素

如何确保文本保持在一行？

编辑

这是我想要达到的效果:

Answer 1

您将 flex-wrap: wrap; 添加到 message 规则，这将使最后一个 flex 元素在没有更多空间时换行。

请注意，span 之前和之后的文本都被视为 flex 元素，匿名元素，因此这将像它们被包裹在自己的元素中一样工作

Fiddle demo

堆栈片段

.message {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.date {
  color: #2AAEDF;
}

<div class="message">
  Hello hello hello Today date is&nbsp;
  <span class="date">
     27 mar 2017
    </span>. Bye Bye Bye Bye
</div>