CSS Flex布局justify-content: space-between失效问题求助

你遇到的问题核心确实是.header-item没有填满父容器的宽度，导致justify-content: space-between没有足够空间生效。以下是非硬编码的解决方案：

• 给.header-item添加width: 100%，让它完全占据父容器的宽度，这样flex布局就能将子元素（标题和关闭按钮）推到两端。
• 确保.header-item的父容器（比如模态框头部容器）是块级元素，且宽度设置合理（比如默认div的块级特性，或显式设置width: 100%），避免父容器宽度被内容收缩限制。

示例代码 #

HTML结构

<div class="modal">
  <div class="modal-header">
    <div class="header-item">
      <h3>模态框标题</h3>
      <button class="close-btn">×</button>
    </div>
  </div>
  <!-- 模态框内容区域 -->
</div>

CSS样式

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px; /* 按需调整最大宽度 */
  background: #fff;
  border-radius: 8px;
}

.modal-header {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.header-item {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 可选，让标题与按钮垂直居中 */
  width: 100%; /* 关键：填满父容器宽度 */
}

.close-btn {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}

这段代码中，.header-item通过width: 100%自适应父容器宽度，无需硬编码固定值，在不同屏幕尺寸下都能保持两端对齐效果。

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