Bootstrap flex布局下如何在子元素之间均匀分配空白间距

如下图所示，当前子元素未填满父容器，红色区域为未使用的空白空间。我尝试在父元素设置display: 'flex'，在子元素设置alignItems: 'space-between'、alignItems: 'left'，但都没有实现想要的效果。

我期望实现的效果如下：

我的代码如下：

import { Link } from 'react-router-dom'

export default function Election({ election }) {
  return (
    <div>
      <h1>{election.name}</h1>
      <div style={{background: '#892650', display: 'flex'}}>

        {
          election.candidates.map((candidate, i) => {
            return (
              <Link to='candidate-info'>
                <div className="card" style={{width: '18rem', maxHeight: '600px', alignItems: 'space-between'}}>
                  <img src="/uploads/profile.jpeg" className="card-img-top" alt="..."/>
                  <div className ="card-body">
                  <h5 className ="card-title">{`${candidate.name} ${candidate.surname}`}</h5>
                  <p className ="card-text">{candidate.motto}</p>
                  </div>

                  <div className ="card-body">
                    <button className ="card-link">Card link</button>
                    <button className ="card-link">Another link</button>
                  </div>
                </div>
              </Link>)
          })
        }

      </div>
    </div>
  )
}

欢迎提供任何可行的修改方案，优先推荐使用Bootstrap原生特性实现。

问题点说明 #

1. alignItems 是flex布局控制交叉轴对齐的属性，不存在 space-between、left 这类取值，你需要的子元素均匀分布效果要通过父容器的 justify-content 属性实现
2. flex容器属性需要写在父元素上，不能设置在子元素上

Bootstrap原生实现方案 #

使用Bootstrap自带的flex工具类即可实现需求，无需额外自定义复杂样式，修改后代码如下：

import { Link } from 'react-router-dom'

export default function Election({ election }) {
  return (
    <div>
      <h1>{election.name}</h1>
      {/* 父容器添加Bootstrap工具类：d-flex开启flex布局，justify-content-between实现子元素均匀分布，flex-wrap支持溢出自动换行，gap-3设置卡片之间的统一间距 */}
      <div className="d-flex justify-content-between flex-wrap gap-3 p-3" style={{background: '#892650'}}>
        {
          election.candidates.map((candidate, i) => {
            return (
              <Link to='candidate-info' key={i}>
                {/* 卡片添加d-flex flex-column实现内部垂直布局，移除错误的alignItems样式 */}
                <div className="card d-flex flex-column" style={{width: '18rem', maxHeight: '600px'}}>
                  <img src="/uploads/profile.jpeg" className="card-img-top" alt="候选人头像"/>
                  <div className="card-body">
                    <h5 className="card-title">{`${candidate.name} ${candidate.surname}`}</h5>
                    <p className="card-text">{candidate.motto}</p>
                  </div>
                  {/* 按钮区域添加mt-auto，自动贴到卡片底部 */}
                  <div className="card-body mt-auto">
                    <button className="card-link">Card link</button>
                    <button className="card-link">Another link</button>
                  </div>
                </div>
              </Link>
            )
          })
        }
      </div>
    </div>
  )
}

响应式优化方案 #

如果需要适配不同尺寸的设备，推荐使用Bootstrap栅格系统实现：父容器替换为row类，每个卡片外层添加col-md-4 col-lg-3类，系统会自动根据屏幕宽度调整卡片宽度和排列方式，无需手动设置固定卡片宽度。

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