Четные блоки с содержмым слева направо, нечётные справа налево

Question

Как написать CSS-код, чтобы в нечётных галереях изображения шли справа налево, а в чётной — слева направо

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.gallery: {
  flex-direction: row;
}

.gallery: {
  flex-direction: row-reverse;
}

.gallery>img {
  width: 200px;
}

<h2>Галерея 1</h2>
<div class="gallery gallery-1">
  <img src="img/photo-1.jpeg" alt="">
  <img src="img/photo-2.jpeg" alt="">
  <img src="img/photo-3.jpeg" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery gallery-2">
  <img src="img/photo-4.jpeg" alt="">
  <img src="img/photo-5.jpeg" alt="">
  <img src="img/photo-6.jpeg" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery gallery-3">
  <img src="img/photo-7.jpeg" alt="">
  <img src="img/photo-8.jpeg" alt="">
  <img src="img/photo-9.jpeg" alt="">
</div>

Answer 1

Предостовляю вам мой код )

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.gallery:nth-of-type(2n) {
  flex-direction: row;
}

.gallery:nth-of-type(2n - 1) {
  flex-direction: row-reverse;
}

.gallery>img {
  width: 100px;
}

<h2>Галерея 1</h2>
<div class="gallery gallery-1">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery gallery-2">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery gallery-3">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
}

.gallery-row-reverse {
  flex-direction: row-reverse;
}


.gallery>img {
  width: 100px;
}

<h2>Галерея 1</h2>
<div class="gallery gallery-1 gallery-row-reverse">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery gallery-2">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery gallery-3 gallery-row-reverse">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 4</h2>
<div class="gallery gallery-4">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

Answer 2

Я бы посоветовал вручную повесить классы.

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.gallery-even {
  flex-direction: row;
}

.gallery-odd {
  flex-direction: row-reverse;
}

.gallery > img {
  width: 100px;
  height: 100px;
  background: blue;
}

.gallery-even > img:not(:last-child) {
  margin-right: 10px;
}

.gallery-odd > img:not(:last-child) {
  margin-left: 10px;
}

<h2>Галерея 1</h2>
<div class="gallery gallery-even">
  <img src="img/photo-1.jpeg" alt="">
  <img src="img/photo-2.jpeg" alt="">
  <img src="img/photo-3.jpeg" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery gallery-odd">
  <img src="img/photo-4.jpeg" alt="">
  <img src="img/photo-5.jpeg" alt="">
  <img src="img/photo-6.jpeg" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery gallery-even">
  <img src="img/photo-7.jpeg" alt="">
  <img src="img/photo-8.jpeg" alt="">
  <img src="img/photo-9.jpeg" alt="">
</div>

Либо же делать это при помощи Javascript

let gallery = document.querySelectorAll('.gallery');
gallery.forEach(function(e, i) {
  e.classList.add(`gallery-${i % 2 === 0 ? 'even' : 'odd'}`);
});

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.gallery-even {
  flex-direction: row;
}

.gallery-odd {
  flex-direction: row-reverse;
}

.gallery > img {
  width: 100px;
  height: 100px;
  background: blue;
}

.gallery-even > img:not(:last-child) {
  margin-right: 10px;
}

.gallery-odd > img:not(:last-child) {
  margin-left: 10px;
}

<h2>Галерея 1</h2>
<div class="gallery">
  <img src="img/photo-1.jpeg" alt="">
  <img src="img/photo-2.jpeg" alt="">
  <img src="img/photo-3.jpeg" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery">
  <img src="img/photo-4.jpeg" alt="">
  <img src="img/photo-5.jpeg" alt="">
  <img src="img/photo-6.jpeg" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery">
  <img src="img/photo-7.jpeg" alt="">
  <img src="img/photo-8.jpeg" alt="">
  <img src="img/photo-9.jpeg" alt="">
</div>

БЛОГ НА HUSL

Четные блоки с содержмым слева направо, нечётные справа налево

Ответы (2 шт):