如何将区块固定到父区块底部？React商品卡片布局优化

优先不改动DOM结构的实现方式 #

给.product容器配置Flex布局，通过margin-top: auto将.product__buy自动推至卡片底部，无需修改现有React组件结构：

.product {
  display: flex;
  flex-direction: column;
  /* 给卡片设置最小高度，保证不同内容长度的卡片布局统一 */
  min-height: 320px; /* 可根据实际需求调整数值 */
}

.product__buy {
  margin-top: auto;
  /* 可选：添加顶部内边距，避免与上方内容过于紧贴 */
  padding-top: 1.2rem;
}

原理：Flex容器中，margin-top: auto会让元素自动占据容器内的剩余垂直空间，从而精准固定在底部。

必须调整结构时的最优实现 #

如果需要优化结构可读性，可将顶部的图片和标题包裹在统一容器中，再用Flex布局控制上下模块的分布：

修改后的React组件： #

import React from 'react';
import data from '../data/data.json';
import './Product.css';

function Product() {
        return (
            <div className='block'>
                {data.map((el) => {
                    return (
                        <div className='product' key={el.id}>
                            {/* 新增顶部内容容器，整合图片与标题 */}
                            <div className='product__header'>
                                <div className='product__image-background'>
                                    <img className='product__image' src={el.img}></img>
                                </div>
                                <h3 className='product__title'>{el.title}</h3>
                            </div>
                            <div className='product__buy'>
                                <h3 className='product__buy-price'>{el.price} грн</h3>
                                <button className='product__buy-button'>В корзину</button>
                            </div>
                        </div>
                    )
                })}
            </div>
        )
}

export default Product;

对应的CSS： #

.product {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.product__header {
  /* 让顶部容器占据除底部购买区外的所有空间 */
  flex: 1;
  /* 可选：若需调整顶部内容的垂直对齐方式，可在此配置 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.product__buy {
  padding-top: 1.2rem;
  /* 可选：给底部区域添加边框，强化模块区分 */
  border-top: 1px solid #eee;
}

这种方式将相关内容归类，提升了代码的可维护性，同时Flex布局能确保所有卡片的底部购买区严格对齐。

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