Как изменить высоту отдельного flex элемента?

Question

[akabeerka]

Здравствуйте! Подскажите, пожалуйста, каким образом можно менять высоту отдельных flex элементов?
Пытаюсь сделать подобную галерею через псевдоэлементы, но они не работают, элементы занимают все свободное пространство. Можно ли это поведение как-то изменить?

https://codepen.io/akabeerka/pen/jOVNQre

<div class="works">
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="1">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="2">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="3">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="4">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="5">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="6">
  </div>
            
</div>

.works {
    display: flex;
    flex-wrap: wrap;
    height: 830px;
}

.works__item {
    width: 30%;
    position: relative;
    margin: 10px;

    border: 1px dashed #ebac0c;
}

.works__item:not-child(odd) {
    height: 300px;
}
.works__item:not-child(even) {
    height: 500px;
}

Answer 1

[NIkita Bykov]

Взяв ваш html за основу, можно реализовать таким образом - https://codepen.io/frontend_dev3/pen/wvovwVr
Подойдет, если блоков в колонке будет 2. Если нужно решение для галереи с большим количеством элементов - дайте знать, предложу иное решение!

Comments

[akabeerka]

Спасибо, примерно так я и хотел сделать. Но почему в моем случае псевдоэлементы not-child(odd) и not-child(even) не работали?

[NIkita Bykov]

akabeerka, "odd" и "even" это четные и нечетные элементы, соответственно работает правило "каждый второй". А стиль блоков в этом случае повторяется не для каждой пары, а для каждой четверки. По тому у меня в стилях было :nth-child(4n) :nth-child(4n-1) :nth-child(4n-2) :nth-child(4n-3)

[NIkita Bykov]

akabeerka, Кстати изменив ширину блоков к примеру с 33% на 25%, вы сможете сделать ту же галерею но уже на 8 фото, стили будут работать.

[akabeerka]

NIkita Bykov, да, я понимаю, что это четные и нечетные. Но ведь если не использовать свойство flex-wrap: wrap;, то они выстроятся в линию будут как раз чередоваться. В моем понимании это было так

Answer 2

[Александр Варлаков]

Конкретно на вопрос как менять:
.works-item:nth-cjild(1){
height: 400px;
}
или добавить элементу свой класс.
По галлереее, если реализовывать на флексах то, что у вас на картинке, то:

<div class="works">
  <div class="col-1">
      <div class="works__item">
        <img class="works__photo" src="img/1.jpg" alt="1">
      </div>
    <div class="works__item">
      <img class="works__photo" src="img/1.jpg" alt="4">
    </div>
  </div>
 </div>

.col-1, .col-2, .col-3 {
display: flex;
flex-direction: column;
}
разбить flex контейнер еще на три контенера, но только c flex-direction: column