CSS Flexbox问题：让带背景色的标题仅包裹文本且换行显示

要实现h1、h2背景仅包裹文本内容，同时保持h2在h1下方换行，只需将标题的display: inline替换为display: inline-block即可。

修改后的CSS代码 #

section { display: flex; flex-direction: column; }
div { -webkit-flex: 1; flex: 1; }
h1, h2 { display: inline-block; /* 替换inline为inline-block */ }
h1 { background: #F00; color: #FFF; font-size: 60px; padding: 8px 24px; }
h2 { background: #554c55; color: #FFF; font-size: 30px; margin-top: 16px; padding: 8px 24px; }

原理说明 #

• inline元素会在同一行内排列，无法单独占据一行；而inline-block兼具块级元素和行内元素的特性：既可以像行内元素一样让背景仅包裹文本内容，又能像块级元素一样自动换行，同时支持margin、padding等块级属性。
• 保留原有Flex布局的设置，不影响整体页面的布局结构。

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