Flex布局桌面端元素缩放及图标标题对齐问题求助

我在一行中放置了三组带文本的图标，每组之间用箭头图片分隔。期望在桌面端时，所有元素能随屏幕尺寸成比例缩放。为此我使用了Flex布局，并为子元素设置了flex属性。但问题是只有箭头图片会缩放，图标（相机图标）和文本等其他元素不会缩放。此外，使用min-width解决缩放问题后，由于文本长度不同，图标与标题无法保持在同一行，请问如何仅用Flex布局（不使用Grid）实现需求？

渲染效果对比 #

期望效果（桌面端任意尺寸） #

当前错误效果（小尺寸桌面端） #

使用min-width后的对齐问题 #

现有代码 #

HTML代码 #

<div class="container">
    <div class="container-content">
        <div class="child">
            <img src="camera.svg" alt="">
            <div class="title">Hello</div>
            <div style="width: 160px; margin: 0 auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa blanditiis temporibus ipsum.</div>
        </div>
        <picture>
            <source media="(max-width:480px)" srcset="arrow-mb.svg">
            <source media="(min-width:481px)" srcset="arrow.svg">
            <img src="arrow.svg" alt="Arrow">
        </picture>

        <div class="child">
            <img src="camera.svg" alt="">
            <div class="title">Hello</div>
            <div style="width: 172px; margin: 0 auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa blanditiis temporibus ipsum.</div>
        </div>
        <picture>
            <source media="(max-width:480px)" srcset="arrow-mb.svg">
            <source media="(min-width:481px)" srcset="arrow.svg">
            <img src="arrow.svg" alt="Arrow">
        </picture>
        <div class="child">
            <img src="camera.svg" alt="">
            <div class="title">Hello</div>
            <div style="width: 160px; margin: 0 auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa blanditiis temporibus ipsum.</div>
        </div>
    </div>
</div>

CSS代码 #

<style>
    .container {
        margin-bottom: 40px;
        background-color: transparent;
        padding: 10px;
    }

    .container-content {
        justify-content: space-around;
        display: flex;
        margin: 0 auto;
        width: 70%;
        align-items: center;
    }
    .container * {
        background-color: transparent;
    }

    .child,
    picture {
        flex: 1;
        text-align: center;
    }

    .child .title {
        font-size: 2em;
        color: #5E6420;
        font-family: Ano Bold;
    }
    
    @media (max-width:480px) {
        picture {
            margin: 20px 0;
        }

        .container {
            padding: 0;
        }

        .container-content {
            flex-direction: column;
        }
       
    }
</style>

要实现桌面端所有元素成比例缩放且图标与标题保持同行，只需对现有代码做以下几处修改：

1. 核心修改思路 #

• 让图标支持比例缩放，避免固定尺寸；
• 用响应式单位设置文本字号，实现随屏幕缩放；
• 给图标和标题套一层Flex容器，强制它们保持同行；
• 调整Flex属性，避免箭头过度挤压内容模块。

修改后的完整代码 #

HTML代码 #

<div class="container">
    <div class="container-content">
        <div class="child">
            <div class="icon-title-wrapper">
                <img src="camera.svg" alt="">
                <div class="title">Hello</div>
            </div>
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa blanditiis temporibus ipsum.</div>
        </div>
        <picture>
            <source media="(max-width:480px)" srcset="arrow-mb.svg">
            <source media="(min-width:481px)" srcset="arrow.svg">
            <img src="arrow.svg" alt="Arrow">
        </picture>

        <div class="child">
            <div class="icon-title-wrapper">
                <img src="camera.svg" alt="">
                <div class="title">Hello</div>
            </div>
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa blanditiis temporibus ipsum.</div>
        </div>
        <picture>
            <source media="(max-width:480px)" srcset="arrow-mb.svg">
            <source media="(min-width:481px)" srcset="arrow.svg">
            <img src="arrow.svg" alt="Arrow">
        </picture>
        <div class="child">
            <div class="icon-title-wrapper">
                <img src="camera.svg" alt="">
                <div class="title">Hello</div>
            </div>
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa blanditiis temporibus ipsum.</div>
        </div>
    </div>
</div>

CSS代码 #

<style>
    .container {
        margin-bottom: 40px;
        background-color: transparent;
        padding: 10px;
    }

    .container-content {
        justify-content: space-around;
        display: flex;
        margin: 0 auto;
        width: 70%;
        align-items: center;
        gap: 10px; /* 避免元素过度挤压 */
    }
    .container * {
        background-color: transparent;
        box-sizing: border-box; /* 统一盒模型计算规则 */
    }

    .child {
        flex: 1;
        text-align: center;
        min-width: 180px; /* 限制最小宽度，防止内容变形 */
    }
    
    picture {
        flex: 0 1 auto; /* 箭头仅在自身尺寸范围内缩放，不抢占内容空间 */
        max-width: 60px; /* 限制箭头最大宽度 */
    }
    
    picture img {
        width: 100%;
        height: auto; /* 保持箭头比例 */
    }

    .icon-title-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px; /* 图标与标题的间距 */
        margin-bottom: 10px;
    }
    
    .child img {
        max-width: 100%;
        height: auto;
        flex-shrink: 0; /* 图标不被压缩变形 */
        max-height: 40px; /* 限制图标最大高度 */
    }

    .child .title {
        font-size: clamp(1.2em, 2vw, 2em); /* 响应式字号，随屏幕宽度自动调整 */
        color: #5E6420;
        font-family: Ano Bold;
        white-space: nowrap; /* 标题强制不换行 */
    }
    
    .child .desc {
        max-width: 200px;
        margin: 0 auto;
        font-size: clamp(0.8em, 1vw, 1em); /* 描述文本也做响应式处理 */
    }
    
    @media (max-width:480px) {
        picture {
            margin: 20px 0;
            max-width: 40px;
        }

        .container {
            padding: 0;
        }

        .container-content {
            flex-direction: column;
            width: 90%;
        }
        
        .icon-title-wrapper {
            flex-direction: column;
            gap: 5px; /* 移动端改为垂直排列 */
        }
    }
</style>

关键修改说明 #

• icon-title-wrapper：通过Flex布局强制图标和标题保持同行，同时保证垂直居中对齐；
• 响应式字号：使用clamp()函数实现文本字号在指定范围内随屏幕宽度动态调整；
• 元素缩放控制：给箭头设置flex: 0 1 auto，避免它过度挤压内容模块；给.child设置min-width防止内容过度收缩；
• 图标处理：设置max-width:100%和height:auto保证图标比例缩放，flex-shrink:0避免被压缩变形。

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