Как выровнить отступы между картинок чтобы они встали ровно при display: flex;?

Пользователь

от ivanrusakov760 , в категории: HTML/CSS , 2 года назад
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    <div class="section__photo">
    <div class="section__photo-gallery">
    <img class="photo__gallery" src="image/photo__bg-1.jpg"  alt="" >
  <div class="section__content"></div>
  </div>



  <div class="section__photo-gallery">
    <img class="photo__gallery" src="image/photo__bg-2.jpg" alt="" >
    <div class="section__content"></div>
  </div>


  <div class="section__photo-gallery">
    <img class="photo__gallery" src="image/photo__bg-3.jpg"  alt="" >
    <div class="section__content"></div>
  </div>



  <div class="section__photo-gallery">
     <img class="photo__gallery" src="image/photo__bg-4.jpg"  alt="" >
     <div class="section__content"></div>
  </div>
    


  <div class="section__photo-gallery">
     <img class="photo__gallery" src="image/photo__bg-5.jpg" alt="" >
     <div class="section__content"></div>
    </div>


   
    <div class="section__photo-gallery">
    <img class="photo__gallery" src="image/photo__bg-6.jpg" alt="" >
      <div class="section__content"></div>
  </div>
  </div>



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
  .section__photo {
display: flex;
flex-wrap: wrap; 
    padding-bottom: 73px;
width: 1280px;
flex-direction: column;
flex-direction: row;
}
  


.section__photo-gallery{
padding-bottom: 20px;
padding-right: 20px;
  position: relative;


}


.section__photo-gallery:last-child(3n - 1){
margin-right: 0;


}







.section__content{
background: rgba(0,0,0,0.50);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;



}


.section__content:hover{
  background: rgba(0,0,0,0.50);
opacity: 1;
}


Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jaren , 2 года назад

@ivanrusakov760 Попробуйте данный CSS код:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.section__photo {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 73px;
  max-width: 1280px;
}

.section__photo-gallery {
  flex: 1; /* Дайте каждому элементу равное пространство */
  margin-right: 20px; /* Добавьте отступ между элементами */
  margin-bottom: 20px; /* Добавьте отступ снизу, если нужно */
  position: relative;
}


Пользователь

от narciso , месяц назад

@ivanrusakov760 

Ваш CSS делает контейнер .section__photo флекс-контейнером, а элементы .section__photo-gallery — флекс-элементами. Вот объяснение изменений и усовершенствований, которые вы добавили:

  1. .section__photo: display: flex; и flex-wrap: wrap; делают контейнер способным размещать флекс-элементы в несколько строк при достижении максимальной ширины. max-width: 1280px; ограничивает максимальную ширину контейнера, что полезно для адаптивности.
  2. .section__photo-gallery: flex: 1; делает так, чтобы все элементы занимали равное пространство. Это равномерно распределяет пространство между элементами. margin-right: 20px; добавляет отступ справа от каждого элемента, что улучшает визуальную разграниченность между ними. margin-bottom: 20px; добавляет отступ снизу для элементов, что также может улучшить читаемость и адаптивность.


Возможные улучшения:

  • Если вы заметите, что последний элемент в строке также имеет отступ справа, добавьте правило для его устранения, например, через псевдоклассы :last-child или :nth-child в зависимости от вашей разметки.
  • Убедитесь, что изображения внутри .photo__gallery имеют width: 100%; и height: auto; в стилях, чтобы они масштабировались правильно в зависимости от размера родительского контейнера.
  • Для абсолютно позиционированного элемента .section__content, чтобы добиться плавной анимации при наведении, добавьте CSS-свойство transition.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.section__content {
  background: rgba(0,0,0,0.50);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease; /* Плавная анимация */
}

.section__content:hover {
  opacity: 1;
}


Эти изменения и улучшения помогут улучшить использование пространства и адаптивность вашего макета.