如何让flex布局下所有元素高度一致 解决portfolio卡片高度不统一问题

问题原因 #

你设置的min-height仅规定了卡片的最小高度阈值，当卡片内容高度超过200px时，卡片会自动被内容撑开，自然就会比其他内容少的卡片更高。同时你给.container设置了align-items: center，会让子元素以自身内容高度为准居中对齐，无法实现等高效果。

解决方案 #

方案1：固定所有卡片高度（适合内容溢出可滚动/截断的场景） #

直接把卡片的min-height改为固定height，同时根据需求增加溢出处理规则，修改.container > *的样式即可：

.container > * {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    padding: 10px;
    /* 把min-height换成固定height */
    height: 200px;
    /* 内容溢出时显示滚动条，你也可以替换为overflow: hidden直接截断溢出内容 */
    overflow: auto;
    margin: 5px;
}

方案2：同行动态等高（适合让所有卡片和当前行最高的卡片高度保持一致） #

不需要固定高度，仅修改flex容器的对齐规则即可。删除.container里的align-items: center，flex布局默认的align-items: stretch会自动让所有子元素高度撑到和当前行最高元素一致：

.container {
    display: flex;
    justify-content: center;
    /* 移除原有的align-items: center即可 */
    flex-wrap: wrap;
}

你原本给子项设置的display:flex+align-items:center已经可以实现卡片内部内容垂直居中，不需要额外修改。如果需要所有行的卡片高度完全统一，优先选择方案1。

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