如何让所有卡片宽高匹配最大尺寸 避免display:flex破坏布局

具体修改方案 #

第一步：调整HTML结构 #

给所有卡片外层新增一个统一父容器，避免flex布局直接作用在根节点影响其他元素：

<div class="profiles-wrapper">
    <!-- 原有所有.profile卡片放在该容器内 -->
    <div class="profile">
            <img src="default.jpg" alt="Profile photo" class="profile_image">
            <div class="profile_name">Name</div>
            <div class="profile_info">Men (12 years)</div>
            <div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
    </div>
    <div class="profile">
        <img src="default.jpg" alt="Profile photo" class="profile_image">
        <div class="profile_name">Administrator Adminovsky</div>
        <div class="profile_info">Men (12 years)</div>
        <div class="profile_verifed"><i class="material-icons">check</i>Verifed</div>
    </div>
</div>

第二步：修改CSS代码 #

新增父容器样式

.profiles-wrapper {
    display: flex;
    flex-wrap: wrap; /* 卡片数量超过一行时自动换行，不需要可删除 */
    align-items: stretch; /* 核心属性：自动让所有卡片高度和最高的卡片保持一致 */
    gap: 20px; /* 控制卡片之间的间距，可按需调整 */
    padding: 20px 0;
}

修改原有.profile类样式

删除冲突的float属性，新增内部flex布局避免拉伸后内容错乱：

.profile {
    font-family: 'Nunito', sans-serif;
    text-align: center;
    width: 200px; /* 把原有max-width改为固定width，保证所有卡片宽度一致 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(#ffffff, #f5f5f5);
    padding: 20px;
    margin: 0 10px 20px 10px;
    /* 删除原有float: left属性，避免和flex布局冲突 */
    transition: all .3s ease;
    display: flex; /* 卡片内部开启flex布局 */
    flex-direction: column; /* 内部元素垂直排列 */
    align-items: center; /* 内部元素水平居中，保留原有排版效果 */
}

可选优化（底部元素对齐）

如果需要让所有卡片的验证标识统一对齐在底部，给.profile_info新增flex属性占满剩余空间即可：

.profile_info {
    margin-bottom: 20px;
    flex: 1;
}

补充说明 #

如果你不想固定卡片宽度，希望宽度自动适配所有卡片中最宽的尺寸，可以把父容器样式替换为grid布局实现：

.profiles-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
    gap: 20px;
    align-items: stretch;
}

以上修改完全保留原有hover缩放、文字排版等所有功能，不会破坏原有样式。

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