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