如何将包含子flexbox的flex容器对齐到父元素底部且justify-content生效

问题原因 #

绝对定位的元素默认宽度为内容自适应宽度，justify-content: space-between 依赖flex容器的可用剩余空间分配子元素间距，容器宽度不足时该规则不会呈现预期效果。

解决方案 #

修改.countdowns的CSS规则，手动指定容器宽度占满父级#home的宽度即可：

.countdowns {
  position: absolute;
  bottom: 0;
  left: 0; /* 对齐父容器左边缘 */
  width: 100%; /* 占满父容器宽度，生成可分配的剩余空间 */
  box-sizing: border-box; /* 避免内边距撑宽导致容器超出父元素范围 */
  display: flex;
  justify-content: space-between;
  /* 可按需添加padding-left/padding-right控制子元素和容器边缘的间距 */
}

补充注意 #

• 你当前贴出的HTML代码中.countdowns容器内仅存在1个.coming-soon2子元素，justify-content: space-between需要至少2个同级子元素才能实现两端对齐分布的效果，如果你需要多组倒计时横向分布，把所有倒计时模块作为.countdowns的直接子元素即可。
• 如果#home容器有自定义的左右内边距，可调整.countdowns的left和width值匹配父容器的内容宽度，避免内容溢出。

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