display：flex 如何控制第二行的样式

在使用 `display: flex` 布局时，可以通过设置 `flex-wrap: wrap` 属性来控制内容超出一行时的换行行为。默认情况下，`flex-wrap` 的值为 `nowrap`，即不换行。

如果您想要控制第二行的样式，可以将子元素放置在容器中，并使用 `flex-wrap: wrap` 将其包裹在多个行中。然后，您可以通过选择子元素并应用相应的样式来控制第二行的样式。

下面是一个示例代码：

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .item {
        width: 100px;
        height: 100px;
        background-color: lightgray;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .second-row {
        background-color: lightblue;
    }
</style>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item second-row">5</div>
    <div class="item second-row">6</div>
    <div class="item second-row">7</div>
</div>

在上述示例中，`.container` 是一个使用 `display: flex` 布局的容器。通过将子元素 `.item` 放置在容器内，并将其中的一些子元素添加了 `.second-row` 类，可以控制第二行的样式。

在 CSS 中，可以使用 `.second-row` 类选择器来选择具有该类的元素，并应用相应的样式。在示例中，`.second-row` 类被设置为具有不同的背景颜色（lightblue）。

这样，您就可以通过控制子元素的类来针对第二行应用不同的样式。