akabeerka
@akabeerka

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

Здравствуйте! Подскажите, пожалуйста, каким образом можно менять высоту отдельных flex элементов?
Пытаюсь сделать подобную галерею через псевдоэлементы, но они не работают, элементы занимают все свободное пространство. Можно ли это поведение как-то изменить?
6012d5886c1ce189615354.png
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;
}
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
frontend-dev
@frontend-dev
Web-developer
Взяв ваш html за основу, можно реализовать таким образом - https://codepen.io/frontend_dev3/pen/wvovwVr
Подойдет, если блоков в колонке будет 2. Если нужно решение для галереи с большим количеством элементов - дайте знать, предложу иное решение!
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Конкретно на вопрос как менять:
.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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы