如何避免Flexbox中条件渲染导致JSX元素移位？

你遇到的问题本质是justify-content: space-between会根据flex容器内的子元素数量和总高度重新分配剩余空间，当条件渲染的<h4>出现时，子元素数量增加，剩余空间被重新划分，导致其他元素移位。完全不需要放弃Flex布局，有几种简单的解决方案：

方法1：用visibility控制显示而非条件渲染占位 #

保留元素的DOM节点，仅通过CSS的visibility属性控制可见性，这样元素的占位空间始终存在，Flex容器的子元素数量不变：

<div>
  <h3>   {points} points / {mistakes} mistakes</h3>
  <h4 
    className='main--textCenter' 
    style={{ visibility: normalMode ? 'visible' : 'hidden' }}
  >
    Record: {pointsRecord ? pointsRecord : 0}
  </h4>
</div>

注：visibility: hidden会保留元素的布局空间，区别于display: none（会完全移除占位）

方法2：给统计容器设置固定高度 #

将包含<h3>和<h4>的div设置固定高度，确保该容器占据的空间不受内部元素数量影响：
首先添加CSS：

.main-stats-container {
  height: 70px; /* 根据你的字体大小和行高调整合适值 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

然后修改JSX：

<div className="main-stats-container">
  <h3>   {points} points / {mistakes} mistakes</h3>
  {normalMode && <h4 className='main--textCenter'>Record: {pointsRecord ? pointsRecord : 0}</h4>}
</div>

这样不管<h4>是否渲染，这个容器的高度固定，主Flex容器的space-between不会因为空间变化而移位。

方法3：调整主容器的Flex布局逻辑 #

放弃justify-content: space-between，改用flex-start配合margin-top: auto固定底部元素，中间元素用固定间距（gap）控制：
修改main的CSS：

main {
  /* 保留原有其他属性 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 改为从顶部开始排列 */
  align-items: center;
  gap: 30px; /* 元素之间的固定间距，可根据需求调整 */
}

/* 给需要固定在底部的元素添加此类 */
.main-bottom-content {
  margin-top: auto; /* 自动占据剩余空间，把元素推到底部 */
}

这种方式下，中间元素的间距固定，底部元素始终在容器底部，新增条件元素只会在自身位置显示，不会影响其他元素的布局。

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