如何使用Flex布局实现自定义卡片的多行正确排版效果

问题说明 #

在前端开发中使用Flex布局绘制自定义卡片时，始终无法实现预期布局效果：使用Flex搭建卡片基础容器后，内部元素排列位置不符合设计要求，添加第二行内容时也存在排版阻碍。

原有实现代码 #

CSS部分 #

.collection-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 5;
    flex-shrink: 5;
    min-width: 50em;
    max-width: 50em;
    margin: 15px !important;
}


.grid-row-container {
    display: grid;
    grid-template-rows: auto auto;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    // padding: 10px;
}
.grid-item {
    //background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    // padding-left: 5px;
    // padding-right: 5px;
    // font-size: 30px;
    text-align: center;
}

.my-row {
  display: flex;
}

.my-column {
  flex: 50%;
}

JSX部分 #

<Card className='collection-card' interactive={true} onClick={() => history.push(getPath())}>
        {/* my-row */}

        <div className='tx-inverse tx-bold collection-title'>{name}</div>
        

        <div className='grid-row-container '>
            <div className='grid-container'>
                <div className='grid-item'>ykykysdfsdfsdafsdfasdfsdf k</div>
                <div className='grid-item'>aaaaaa k</div>
                <div className='grid-item'>
                    <div className='collection-card-buttons '>
                        <button
                            type='button'
                            className='btn btn-primary icon-button field-inline card-forcewidth'
                            onClick={() => {
                                //setEntityModalOpen(true);
                                // history.push(`/objects/object-templates/${id}` + window.location.search);
                            }}
                        >
                            view 
                        </button>
                    </div>
                </div>
            </div>

            <div className='grid-container'>
                <div className='grid-item'>aaaaaa k</div>
                <div className='grid-item'>aaaaaa k</div>
            </div>
        </div>
    </Card>

问题原因 #

• 卡片根容器.collection-card设置了flex-direction: row，导致内部标题、内容容器默认横向并排，和预期的「标题在上、内容区在下」的纵向排版逻辑冲突，这是布局错乱的核心原因。
• 网格列使用auto作为列宽规则，列宽会跟随内容长度自动伸缩，无法实现固定比例的列对齐效果。
• 第二行网格容器沿用3列模板但仅放置2个元素，会出现列错位、空位异常的问题。
• 元素之间没有统一的间距规则，按钮未适配单元格宽度，进一步加剧排版错乱。

修复代码 #

直接替换原有CSS即可，JSX结构不需要改动：

.collection-card {
    display: flex;
    /* 改为纵向排列，实现标题在上、内容区在下的结构 */
    flex-direction: column;
    gap: 12px;
    min-width: 50em;
    max-width: 50em;
    margin: 15px !important;
    padding: 16px;
}

.collection-title {
    font-weight: 700;
}

.grid-row-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.grid-container {
    display: grid;
    /* 前两列等宽占剩余空间，最后一列固定宽度放操作按钮 */
    grid-template-columns: 1fr 1fr 120px;
    gap: 8px;
    width: 100%;
}

/* 第二行仅需两列，单独设置列规则和第一行前两列对齐 */
.grid-container:nth-child(2) {
    grid-template-columns: 1fr 1fr;
}

.grid-item {
    border: 1px solid rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-card-buttons {
    width: 100%;
}

.collection-card-buttons button {
    width: 100%;
}

修复说明 #

• 根容器改为纵向Flex布局后，标题和内容区会自动上下排列，通过gap统一控制元素间距，不需要额外加margin调整
• 网格列使用fr弹性单位做比例分配，替代原有的auto规则，保证列宽固定对齐，不会被内容长度撑变形
• 第二行网格单独设置两列等宽，和第一行前两列宽度完全匹配，不会出现错位
• 网格项设置Flex居中，按钮宽度100%适配单元格，保证操作按钮大小统一

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