如何让Flex布局中隐藏第二个div后首个div占50%屏幕并居中？

方案一：纯Flex属性实现（推荐） #

利用Flex布局的flex属性和容器的justify-content，无需JS干预即可实现需求：

1. 容器样式调整：

.list-detail {
  display: flex;
  justify-content: center; /* 子元素水平居中 */
}

2. 子元素样式调整：

.first-list, .second-list {
  flex: 0 0 50%; /* 固定宽度50%，不收缩、不放大 */
}

• 双元素显示时：两个子元素各占50%宽度，并排填满容器；
• 单元素显示时：first-list会在容器内自动居中，同时保持50%宽度。

方案二：CSS伪类配合隐藏逻辑 #

通过:only-child伪类识别唯一可见的子元素，自动触发居中样式：

1. 基础布局样式：

.list-detail {
  display: flex;
}
.first-list, .second-list {
  width: 50%; /* 双元素时各占50% */
}

2. 唯一子元素样式：

/* 容器内仅存在一个可见子元素时生效 */
.list-detail > div:only-child {
  margin: 0 auto; /* 水平居中 */
}

注意：需确保被隐藏的second-list设置了display:none，此时它不会被计入容器的子元素计数，first-list会匹配:only-child规则。

方案三：jQuery动态添加类名 #

通过JS判断内容状态，给目标元素添加类来切换样式：

1. CSS样式定义：

.list-detail {
  display: flex;
}
.first-list, .second-list {
  width: 100%; /* 双元素时自动平分宽度 */
}
/* 单元素状态下的样式 */
.first-list.single-item {
  width: 50%;
  margin: 0 auto;
}

2. jQuery逻辑处理：

// 填充内容后执行状态判断
if ($('.second-list').is(':empty')) {
  $('.second-list').hide();
  $('.first-list').addClass('single-item');
} else {
  $('.second-list').show();
  $('.first-list').removeClass('single-item');
}

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