css - 如何在flex设计中选择行的第一个元素和最后一个元素？

Question

如何从 flexbox 设计中选择一行中的第一个和最后一个项目？

例如，在这张照片中，第一行和最后一行：

标签： cssflexbox

Answer 1

尝试使用这个：

div {
      display: flex;
      justify-content: space-between;
    }
    .first-row>p:first-child {
      color: red;
    }
    .first-row>p:last-child {
      color: green;
    }

<div class="first-row">
    <p>first</p>
    <p>second</p>
    <p>third</p>
</div>
<div class="second-row">
    <p>first</p>
    <p>second</p>
    <p>third</p>
</div>

在这里，我采取了<p>作为孩子。如果您希望您可以div作为孩子，请确保将 flex 从 div 中取出并应用于标签first-row而second-row不是div标签。也first-row>p改成first-row>div