Flexbox实现三元素两列布局：右侧p与a无法上下排列求解

直接在.on-offer上设置Flex布局后，它的三个直接子元素<img>、<p>、<a>都会成为同级Flex项，默认沿横向主轴排列。你给p和a设置flex:1只是让两个元素瓜分剩余横向空间，因此二者会并排显示，无法实现上下堆叠的效果。

方案1：调整HTML结构（推荐，布局逻辑清晰、适配性好） #

给右侧需要上下排列的p、a元素套一层独立容器，作为Flex布局的右列，修改后的HTML结构：

<li>
    <div class="on-offer">
        <img src="#" alt="offer标识" />
        <div class="offer-text">
            <p>Title</p>
            <a href="#">Link text</a>
        </div>
    </div>
</li>

对应调整后的SCSS代码：

.on-offer {
    text-align: center;
    display: flex;
    align-items: center; // 控制左右列垂直居中对齐
    justify-content: space-between;
    gap: 1rem; // 按需调整图片和右侧文本的间距

    img {
        width: 50px;
        height: auto;
        display: block;
        flex-shrink: 0; // 避免图片被flex布局压缩变形
    }

    .offer-text {
        flex: 1; // 右列占满除图片外的剩余宽度
        display: flex;
        flex-direction: column; // 让内部p、a沿纵向排列，实现上下堆叠
    }

    p {
        font-family: $serif;
        font-style: italic;
        font-weight: 400;
        color: #cc0000;
        margin: 0 0 0.5rem 0; // 按需调整标题和下方链接的间距
    }

    a {
        display: block;
        text-decoration: none;
        color: $black;
        font-family: $sans-serif;
    }
}

方案2：不改动HTML，纯CSS实现（适用于无法调整DOM结构的场景） #

利用Flex的换行特性，手动指定p、a的宽度，让二者自动换行到图片右侧的纵向空间，SCSS代码如下：

.on-offer {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem; // 左右列的横向间距

    img {
        width: 50px;
        height: auto;
        display: block;
    }

    p {
        font-family: $serif;
        font-style: italic;
        font-weight: 400;
        color: #cc0000;
        // 宽度 = 容器总宽度 - 图片宽度 - 横向间距
        flex: 0 0 calc(100% - 50px - 1rem);
        margin: 0 0 0.5rem 0;
    }

    a {
        display: block;
        text-decoration: none;
        color: $black;
        font-family: $sans-serif;
        // 和p保持相同宽度，自动排列在p下方
        flex: 0 0 calc(100% - 50px - 1rem);
    }
}

方案2需要手动计算宽度值，响应式适配灵活度低于方案1，无特殊需求优先选择方案1。

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