Flex布局异常：H2占满剩余宽度，图片与div无法按预期排列

嘿，我来帮你搞定这个布局小问题！

首先，咱们来拆解一下你遇到的情况：你期望图片和.bg-activity div在960px的flex容器里横向排列，用justify-content: space-between分散对齐，但H2元素却占满了所有剩余宽度。问题的根源主要有两个：

问题分析 #

1. H2的块级特性：H2是默认的块级元素，它会自动占满父容器（也就是.bg-activity）的可用宽度，哪怕内容不需要这么多空间。
2. Flex子元素的默认行为：.bg-activity作为.activiteit容器的flex子元素，默认会尽可能占据容器的剩余空间（虽然flex-grow默认是0，但当容器有多余空间时，它会被拉伸填充），这就导致H2跟着占满了整个剩余宽度。

解决方案 #

根据你的需求，我给你两种针对性的解决办法：

办法1：让.bg-activity仅适配内容宽度（实现图片左、div右的分散对齐） #

如果你希望justify-content: space-between真正生效，让图片和div分别贴在容器的左右两侧，中间留空，可以给.bg-activity和H2设置宽度适配内容：

.activiteit .bg-activity {
  width: fit-content;
  align-self: flex-start; /* 可选：让div和图片顶部对齐，避免垂直居中 */
}

.activiteit-title {
  width: fit-content; /* 让H2宽度仅适配文字内容 */
}

办法2：让.bg-activity占据剩余空间，但H2不撑满宽度 #

如果你希望.bg-activity填满容器剩余空间，只是H2不要占满整个div的宽度，只需要修改H2的样式即可：

.activiteit-title {
  width: fit-content;
  /* 或者用 display: inline-block; 也能达到同样效果 */
}

额外的小修正 #

我还注意到一个小笔误：你的CSS里定义了.activiteit-text类，但HTML里的p标签用的是article-text，这样文字样式不会生效，记得改成：

<p class="activiteit-text"> Als je er echt geen zin in hebt. Kruip dan terug in je bed. Neem je favoriete serie en snack en doe gewoon eens niets. Vergeet niet dat het tenslotte maar één maal blue monday per jaar is. Bekijk het positief er zijn zoveel meer mooie dagen. Check it out. </p>

另外，建议统一单位（你的CSS用rem，img用px），比如把img的宽度改成40rem（如果1rem=10px的话），这样布局会更一致哦！

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