Возникли проблемы с переносом изображений в flexbox

Question

По какой-то причине я не могу обернуть эти изображения. Они переполняют точку ширины, которую я сделал для своего контейнера. Не уверен, что я делаю что-то не так, помещая абзацы под каждым изображением, и это влияет на это?

Чтобы обернуть изображения, у меня может быть 3 сверху и 2 справа под 3, каждое с их заголовком по центру прямо под изображением.

.block2 {
  background-color: black;
  width: 100%;
}

.pics {
  display: flex;
}

.pics img {
  height: 200px;
  width: 300px;
  margin: 20px;
  flex-shrink: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.pics p {
  flex-wrap: wrap;
}

<div class="block2">
  <div class="text2">
    <h2>Tea of the Month</h2>
    <h1>What's Steeping at The Tea Cozy?</h1>
  </div>

  <div class="pics">
    <img src="images/img-berryblitz.jpg" alt="berryblitz">
    <p>Fall Berry Blitz Tea</p>
    <img src="images/img-spiced-rum.jpg" alt="spicedrum">
    <p>Spiced Rum Tea</p>
    <img src="images/img-donut.jpg" alt="donut">
    <p>Seasonal Donuts</p>
    <img src="images/img-myrtle-ave.jpg" alt="myrtle">
    <p>Myrtle Ave Tea</p>
    <img src="images/img-bedford-bizarre.jpg" alt="bedford">
    <p>Bedford Bizarre Tea</p>
  </div>
</div>

Answer 1

Основная идея flex - это то, что есть flex-контейнер, и внутри этого контейнера находятся flex-элементы.

По умолчанию гибкий контейнер всегда будет пытаться уместить все своиэлементы в одну строку.Вот что сейчас происходит с вашим контентом.Все ваши элементы img и p являются прямыми потомками гибкого контейнера, поэтому он помещает их в одну строку.

Если вы хотите, чтобы они переносились на вторую строку, вы можете установить flex-wrap: wrap; в CSS вашего гибкого контейнера (.pics).Это начнет оборачивать ваши элементы.Однако это все равно не приведет к желаемому поведению.

Прямо сейчас, каждый img и p является прямым потомком гибкого контейнера, если вам нужны img и p чтобы перемещаться вместе внутри гибкого контейнера, вам нужно сгруппировать их, возможно, в нечто вроде div.

 <div class="pics">
  <div class="pic">
    <img src="images/img-berryblitz.jpg" alt="berryblitz">
    <p>Fall Berry Blitz Tea</p>
  </div>
   ...
<div>

Теперь, по крайней мере, абзац и изображение будут вместе.Теперь вы можете установить любой другой стиль, который вы хотите для каждого элемента, например центрирование, на элементе (.pic).

Я рекомендую проверить это руководство для flex box для более подробной информации.,Надеюсь, это приведет вас в правильном направлении, но есть и много других способов использовать flex!

Answer 2

Таким образом, вам нужно иметь три элемента в первом ряду и два в ряду ниже:

• с flexbox вам нужно иметь обертку для изображения и описание для начала (используя figure для переноса изображения и описания здесь),

• также вы должны давать flex-wrap: wrap на гибкий контейнер , а не на гибкий элемент ,

• теперь вы можете использовать flex-basis или width (скажем, flex-basis: 33.33%) для упаковочной флексбокс , чтобы иметь 3 элемента в строке

См. Демонстрацию ниже с комментариями:

.block2 {
  background-color: black;
  width: 100%;
}

.pics {
  display: flex;
  flex-wrap: wrap; /* wrapping flexbox */
}

.pics figure {
  margin: 0; /* reset default margin of figure */
  margin: 10px; /* space between flex items */
  flex-basis: calc(33.33% - 20px); /* 3 items in a row - adjust for the 10px margin on each side */
}

.pics img {
  display: block;
  height: 100px; /* height of each row */
  width: 100%;
  object-fit: cover; /* fit as cover maintaining aspect ratio */
}

figcaption {
  color: #fff;
}

<div class="block2">
  <div class="text2">
    <h2>Tea of the Month</h2>
    <h1>What's Steeping at The Tea Cozy?</h1>
  </div>
  <div class="pics">
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Fall Berry Blitz Tea
      </figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Spiced Rum Tea
      </figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Seasonal Donuts
      </figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Myrtle Ave Tea
      </figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Bedford Bizarre Tea
      </figcaption>
    </figure>
  </div>
</div>

---

Для n элементов подряд с флексбоксами, приведенные ниже ответы могут дать вам больше информации:

• 5 элементов в строке, автоматическое изменение размеров элементов во flexbox
• Как начать новую строку с определенного элемента в Flexbox?