将节标题与第一个内容项对齐，而不是在 Flexbox 布局中居中

Question

我正在开发一个部分布局，其中有一个标题和一个内容容器，使用 Flexbox 将内容水平居中。内容容器可容纳多个媒体卡。

<section>
    <h2 class="section-headline">Section Headline</h2>
    <div class="section-content" style="display: flex; justify-content: center; gap: 20px;">
        <div style="border: 1px solid black;">
            <h3>Media Card 1</h3>
        </div>
        <div style="border: 1px solid black;">
            <h3>Media Card 2</h3>
        </div>
        <div style="border: 1px solid black;">
            <h3>Media Card 3</h3>
        </div>
    </div>
</section>

我面临的问题是标题应与第一个内容项（第一个媒体卡）的开头对齐，但我不想将其置于该部分本身的中心。 如何对齐标题以匹配第一个媒体卡的开头（请参见以下屏幕截图），而不是使其与内容居中？

我已经尝试过调整边距，但它似乎没有给我想要的“响应式”结果。是否有基于 Flexbox 的解决方案或简单的 CSS 方法可以实现此目的？ 如有任何建议，我们将不胜感激！

Answer 1

.section {
    display: flex;
    justify-content: center; /* Centers the entire section horizontally */
    padding: 20px;
}

.section-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns the headline with the content */
}

.section-headline {
    margin-bottom: 10px; /* Space between the headline and the media cards */
}

.section-content {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.media-card {
    border: 1px solid black;
    padding: 10px;
    width: 200px; /* Adjust based on design */
}

<section class="section">
    <div class="section-container">
        <h2 class="section-headline">Section Headline</h2>
        <div class="section-content">
            <div class="media-card">
                <h3>Media Card 1</h3>
            </div>
            <div class="media-card">
                <h3>Media Card 2</h3>
            </div>
            <div class="media-card">
                <h3>Media Card 3</h3>
            </div>
        </div>
    </div>
</section>