如何在现有HTML结构中使用Flexbox实现目标页面布局？

我想要实现指定的页面布局（第一个新闻模块占满整行，后三个新闻模块横向并排），要求不能修改HTML结构，只能通过CSS调整样式。目前我无法正确布局最后3个.news元素，恳请指点简便且正确的实现方法。

现有HTML结构如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="navbar">
        <p>Home</p>
        <p>Our games</p>
        <p>Contact</p>
        <p>Support</p>
        <p>Log In</p>
    </div>
    <div class="content">
        <div class="news">
            <h1>Gaming Website</h1>
            <p>
                Welcome to our website! We have a wild variety of games that you will probably like.
                Feel free to make a suggestion if you'd like to have another game added.
            </p>
        </div>
        <div class="news">
            <h3>Steam Support is now live</h3>
            <p>
                From now on, you can also start up games from your Steam library!
                The developers have worked hard for this functionality.
                If you have any bugs, report them at the Support page.
            </p>
        </div>
        <div class="news">
            <h3>Minecraft Steve confirmed for Smash?</h3>
            <p>
                Is Steve coming to Smash Ultimate?
                We have the latest hints and potential leaks to keep you
                updated about the possibility of the iconic tree-puncher
                coming to Smash Ultimate.
            </p>
        </div>
        <div id="breaking" class="news">
            <h3>Half-Life 3 confirmed</h3>
            <p>
                It is finally real. Since 1998, fans across the globe have been
                hoping for a conclusion to the Half-Life trilogy that was started
                ages ago.
                However, it was last Tuesday when it was announced that the game
                will be published next summer.
            </p>
        </div>
    </div>
</body>

</html>

推荐用Flexbox布局，这是新手实现这类多行多列布局最简便的方式，代码简洁且易调整。以下是完整CSS代码及说明：

/* 全局样式重置，消除浏览器默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 导航栏横向排列，深色背景+白色文字 */
.navbar {
  display: flex;
  background-color: #333;
  padding: 1rem;
}

.navbar p {
  color: white;
  margin-right: 2rem;
  cursor: pointer;
}

/* 内容容器启用Flex布局，允许元素换行 */
.content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 模块间统一间距，替代margin更省心 */
  padding: 1rem;
}

/* 第一个新闻模块强制占满整行 */
.content .news:first-child {
  flex: 0 0 100%; /* 固定宽度100%，不缩放 */
  background-color: #f0f0f0;
  padding: 1.5rem;
  border-radius: 4px;
}

/* 后三个新闻模块自动平分当前行宽度 */
.content .news:not(:first-child) {
  flex: 1; /* 每个模块均分可用空间，自适应屏幕 */
  background-color: #f0f0f0;
  padding: 1.5rem;
  border-radius: 4px;
}

/* 突发新闻加红色边框做区分 */
#breaking {
  border: 2px solid #dc3545;
}

关键逻辑说明： #

1. flex-wrap: wrap：让.content内的元素在空间不足时自动换行，确保第一个模块占满整行后，后三个能在新行并排。
2. flex: 0 0 100%：给第一个.news设置，强制它占满整行，不会被压缩或拉伸。
3. flex: 1：给后三个.news设置，让它们自动平分当前行的可用宽度，无论屏幕大小都能保持三列布局。
4. gap: 1rem：直接在容器内设置模块间距，避免了外边距重叠的问题，比单独给每个元素加margin更高效。

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