Как с помощью флексбокса разместить блоки с фотографиями в ровную сетку?

Question

есть блок photos,который шириной 300px и внутри него 6 блоков photo шиириной 92px. Как сделать флексбоксом так,чтобы фотографии располагались,как на картинке?

Answer 1

Вот два примера как это можно сделать с помощью Flex, первый это полная высота, второй частичное отображение:

img {
  width: 100%;
  height: auto;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 300px;
}

.wrapper.one {
  height: 284px;
}

.wrapper.one > img {
  width: 92px;
}

.wrapper.two {
  height: 194px;
  padding: 50px 0;
}

.wrapper.two > span {
  display: block;
  overflow: hidden;
  width: 92px;
  height: 92px;
}

.wrapper.two img {
  margin-top: -20px;
}

<div class="wrapper one">
  <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
</div>

<div class="wrapper two">
  <span>
     <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  </span>
  <span>
     <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  </span>
  <span>
     <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  </span>
  <span>
     <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  </span>
  <span>
     <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  </span>
  <span>
    <img src="https://i.picsum.photos/id/130/200/300.jpg?grayscale&hmac=lnpcMcQr_rlrEUIhN-1FFvHOItuUy4hXG2nn2pNKHfM" />
  </span>
</div>

БЛОГ НА HUSL

Как с помощью флексбокса разместить блоки с фотографиями в ровную сетку?

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