Как выбрать первый элемент и последний элемент строки во флекс-дизайне?

Question

Как выбрать первый и последний элемент в строке дизайна flexbox?

Например, на этой фотографии первый и последний подряд:

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