如何将flex布局中的内容移动到div容器顶部？

问题原因 #

• 错用了flex交叉轴对齐属性：align-content 仅对多行flex容器生效，你的布局是单行flex，需要使用align-items: flex-start才能让子元素贴到容器顶部。
• <p>标签存在浏览器默认的上下外边距，就算父容器对齐规则正确，默认margin也会导致文本和父容器顶部存在空隙。

修正后代码 #

<div class="totals" style="display:flex; align-items: flex-start; justify-content: space-between; width:100%; background-color:green;">
  <p style="margin:0; color:#0e487f; background-color:red;">£1,000</p>
  <p style="margin:0; color:#0e487f;">£50,000</p>
</div>

补充说明 #

如果你的flex布局后续需要支持多行换行，也可以同时保留align-content: flex-start，不会影响单行状态下的效果。

内容的提问来源于stack exchange，提问作者henry434