Flex-box显示儿童div并排显示

Question

我有一个.content-container div设置为display: flex和我要并排display: flex子div（ .message-body, .message-action ） .message-action div浮动在右侧。

这是我正在做的事情： https : //codepen.io/anon/pen/ZRZKdZ

如您所见， .message-action div似乎位于.message-body div之下。

Answer 1

如果要并排使用，则需要使用flex-direction:row而不是容器上的column （ 请阅读https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction有关此属性的更多信息 ）。

（ 同时删除float:right ）

更新的笔： https : //codepen.io/anon/pen/qKwjNa