如何用FlexBox实现行等高布局（基于Bootstrap 5.2.x）

核心思路 #

利用Bootstrap原生Flexbox特性，让中间列的内容容器继承父列的完整高度，再通过flex属性让单行内容自动拉伸填充整个高度。

具体CSS代码 #

/* 确保每个表格列容器占满row的高度 */
.shrpa-table {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 让表格内容区域自动填充标题下方的剩余空间 */
.shrpa-table .shrpa-table-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 中间列的单行内容拉伸填充整个区域，同时垂直居中内容 */
.shrpa-table:nth-child(2) .shrpa-table-row {
  flex: 1;
  display: flex;
  align-items: center;
}

代码解释 #

1. .shrpa-table设置为flex column并高度100%，确保三列容器都和最高列等高，同时让标题与内容区域垂直分布。
2. .shrpa-table-rows设置flex:1，让内容区域自动填充标题下方的剩余高度。
3. 针对中间列（nth-child(2)）的行设置flex:1，让唯一的一行拉伸填充整个内容区域，align-items:center保证内容垂直居中，匹配参考图的视觉效果。

保留原有结构的HTML代码 #

<div id="shrpa-table-container" class="link-id-45594 cat-id-10223 tlcat-id-10223">
<h3>Aircraft information</h3>
<div class="row">
    <div class="col col-md-5 shrpa-table">
        <div class="shrpa-table-title"><h4>Aircraft size and type</h4></div>
        <div class="shrpa-table-rows">
            <div class="shrpa-table-row shrpa-table-pad">
                <span class="shrpa-table-caption">TurboProp</span><span class="shrpa-table-value"></span>
            </div>
            <div class="shrpa-table-row-alt shrpa-table-pad">
                <span class="shrpa-table-caption">Light Jet</span><span class="shrpa-table-value">Cessna Citation CJ2+, Cessna Citation CJ3+</span>
            </div>
            <div class="shrpa-table-row shrpa-table-pad">
                <span class="shrpa-table-caption">Mid Jet</span><span class="shrpa-table-value">Embraer Legacy 450, Embraer Praetor 500</span>
            </div>
            <div class="shrpa-table-row-alt shrpa-table-pad">
                <span class="shrpa-table-caption">Super Mid</span><span class="shrpa-table-value"></span>
            </div>
            <div class="shrpa-table-row shrpa-table-pad">
                <span class="shrpa-table-caption">Heavy Jet</span><span class="shrpa-table-value"></span>
            </div>
        </div>
    </div>
    <div class="col col-md-2 shrpa-table">
        <div class="shrpa-table-title"><h4>Aircraft age</h4></div>
        <div class="shrpa-table-rows">
            <div class="shrpa-table-row shrpa-table-pad">
                <span class="shrpa-table-value">3 years</span>
            </div>
        </div>
    </div>
    <div class="col col-md-5 shrpa-table">
        <div class="shrpa-table-title"><h4>Aircraft independent ratings</h4></div>
        <div class="shrpa-table-rows">
            <div class="shrpa-table-row shrpa-table-pad">
                <span class="shrpa-table-caption">Argus rating</span><span class="shrpa-table-value">Platinum Rating</span>
            </div>
            <div class="shrpa-table-row-alt shrpa-table-pad">
                <span class="shrpa-table-caption">Wyvern rating</span><span class="shrpa-table-value">Wingman Pro</span>
            </div>
            <div class="shrpa-table-row shrpa-table-pad">
                <span class="shrpa-table-caption">ISBAO</span><span class="shrpa-table-value"></span>
            </div>
            <div class="shrpa-table-row-alt shrpa-table-pad">
                <span class="shrpa-table-caption">Other rating</span><span class="shrpa-table-value"></span>
            </div>
        </div>
    </div>
</div>
</div>

效果验证 #

添加上述CSS后，中间列的"3 years"行会自动拉伸至左侧列的完整内容高度，左右列的行高保持对齐，完全匹配参考图的布局效果。

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