如何为仅含一个子项的Flex容器设置justify-content: end作为回退？

你需要让Flex容器在包含多个子项时用justify-content: space-between实现上下分布，而当容器仅保留Read more一个子项时，将其固定在容器底部。这里提供两种可行方案：

方法1：用CSS :has()选择器（现代浏览器适用） #

通过:has()选择器检测容器是否只有一个子元素，动态切换对齐方式：

.container {
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 多子项时的默认对齐 */
  align-items: flex-end;
  height: 200px;
  margin-bottom: 20px;
}

/* 容器仅含一个子元素时，设置对齐为底部 */
.container:has(:only-child) {
  justify-content: flex-end;
}

/* 原有样式保持不变 */
.tags {
  display: flex;
}

.tags span {
  background-color: #f0f;
  padding: 10px;
  margin: 0 0 0 10px;
}

.price {
  display: flex;
  background-color: #ff0;
  padding: 10px;
  font-size: 150%
}

.read-more {
  display: flex;
  background-color: #0ff;
  padding: 10px;
}

这个方案逻辑直接，无需修改HTML，不过:has()选择器仅支持Chrome 105+、Firefox 121+、Safari 15.4+版本的浏览器。

方法2：手动添加类名（全浏览器兼容） #

如果需要兼容旧版浏览器，给仅含Read more的容器加个专属类名，再通过类名调整样式：

修改后的HTML： #

<div class="container">
  <div class="tags">
    <span>tag 1</span><span>tag2</span><span>tag 3</span>
  </div>
  <div class="price">
    $100
  </div>
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

<!-- 给单子项容器加类名 -->
<div class="container single-item">
  <div class="read-more">
    <a href="#">Read more >></a>
  </div>
</div>

新增CSS： #

.container.single-item {
  justify-content: flex-end;
}

这种方案兼容性拉满，唯一需要额外做的就是给特殊容器标记类名。

两种方案都能实现需求：多子项时保持space-between的分布，单子项时让Read more固定在容器底部。

内容的提问来源于stack exchange，提问作者Faye D.