小屏幕下如何让Flexbox中首个元素独占一行，其余两个换行？

我为正在开发的网站做了一个包含三个购买选项盒子的Flexbox布局。在小屏幕尺寸下，我希望第一个选项单独占一行，另外两个换行到下方，但实现起来遇到了困难。

当前效果 #

预期效果 #

当前代码 #

HTML部分 #

<section class="flexbox-container container-fluid">
        <div class="reading reading1">
            <div class="flex-number">1</div>
            <h2 class="flex-type-of-report">Birth Chart Report</h2>
            <p class="flex-text">A detailed written analysis of your psychological traits, relationship patterns, and
                career indicators.
            </p>
            <a href="Birth Chart Report/birth-chart-report.html" class="flex-button btn btn-outline-primary">Learn
                More</a>
        </div>
        <div class="reading reading2">
            <div class="flex-number">2</div>
            <h2 class="flex-type-of-report">Relationship Report</h2>
            <p class="flex-text">A thorough written analysis of your relationship with a friend, lover, or family
                member as it evolves over time.
            </p>
            <a href="Relationship Report/relationship-report.html" class="flex-button btn btn-outline-primary">Learn
                More</a>
        </div>
        <div class="reading reading3">
            <div class="flex-number">3</div>
            <h2 class="flex-type-of-report">Predictive Report</h2>
            <p class="flex-text">A detailed written report that forecasts themes of the coming year and how you can
                prepare for the challenges to come.
            </p>
            <a href="Predictive Report/predictive-report.html" class="flex-button btn btn-outline-primary">Learn
                More</a>
        </div>
    </section>

CSS部分 #

.flexbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    background-image: url(../Images/Carousel.jpg);
    background-size: cover;
    padding: 40px 0 30px 0;
}

.reading {
    background-color: #fff;
    border-radius: 15px;
    width: 310px;
    height: 300px;
    padding: 10px 30px 30px 30px;
    position: relative;
    box-sizing: border-box;
}

.flex-number {
    background-color: #e8e8e8;
    width: 70px;
    height: 70px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    padding: 18px 20px 20px 20px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: bold;
}

.flex-type-of-report {
    font-size: 1.6rem;
    margin-top: 45px;
}

.flex-text {
    margin-bottom: 30px;
}

我曾尝试用flex-basis让第一个盒子占满整行，但会改变盒子尺寸，不符合视觉要求；还试过在小屏幕加空div推动第二个盒子换行，却出现了难以调整的尴尬间距，不知道还有什么解决办法。

可以通过媒体查询结合Flexbox属性实现需求，既能让第一个盒子独占一行，又能保持原有尺寸：

方法一：利用flex-basis和内部居中 #

给.reading添加固定伸缩属性，再在小屏幕媒体查询中让第一个盒子占满整行并居中内部内容：

/* 原有样式基础上添加 */
.reading {
    flex: 0 0 auto; /* 固定尺寸，不自动伸缩 */
}

/* 适配小屏幕（示例用768px作为断点，可根据需求调整） */
@media (max-width: 768px) {
    .reading1 {
        flex-basis: 100%; /* 占满整行宽度 */
        display: flex;
        flex-direction: column;
        align-items: center; /* 内部内容居中，保持原有视觉效果 */
    }
}

方法二：强制宽度+内部元素固定尺寸 #

直接让第一个盒子占满整行，再强制内部元素保持原有宽度：

@media (max-width: 768px) {
    .reading1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .reading1 > * {
        width: 310px; /* 强制内部元素保持原有宽度 */
    }
}

这两种方法都能实现第一个盒子独占一行且尺寸不变，另外两个盒子自动换行到下方的效果，同时避免了空div带来的间距问题。

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