Having trouble getting images to wrap with flexbox

Question

For some reason I cannot get these images to wrap. They overflow past the point of the width I made for my container. Not sure if I'm doing something wrong by putting paragraphs under each image and that's affecting it?

For the images to wrap so I can have 3 on top and 2 right below the 3, each with their title centered right under the image.

.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>

Try adding `flex-wrap:wrap;` directly in your `.pics` class. — Christopher Bennett, May 02 '19 at 03:37
I might add, if this doesn't solve your problem, can you be more specific about the nature of it? I am trying it on a fiddle, but the images don't come up so I can't see their specific alignments. — Christopher Bennett, May 02 '19 at 03:39

score 2 · Accepted Answer · answered May 02 '19 at 03:49

The basic idea of flex, is that there is a flex container, and inside that container are the flex items.

By default, a flex container will always try to fit all of its items into one line. So that is what is happening to your content right now. All of your img and p elements are direct children of the flex container, so it is fitting them on one line.

If you want them to wrap to a second line, you can set flex-wrap: wrap; in your flex container's (.pics) CSS. This will start to wrap your elements. However this still won't result in the behaviour you want.

Right now, each img and p is a direct child of the flex container, if you want an img and a p to be moved together within the flex container, you will need to group them together, possibly in something like a div.

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

Now, at least the paragraph and image will be together. You can now set any other styling you want for each item, such as centering, on the item (.pic).

I recommend checking out this guide to flex box for more details. Hopefully this lead you in the right direction, but there are many other ways to utilize flex as well!

score 1 · Answer 2 · answered May 02 '19 at 05:12

So you need to have three items in the first row and two in the row below:

with flexbox you need to have a wrapper for the image and the description to start with (using figure to wrap the image and description here),
also you should be giving flex-wrap: wrap on the flex container and not on the flex item,
now you can use flex-basis or width (say flex-basis: 33.33%) for the wrapping flexbox to have 3 items per row

See demo below with comments inline:

.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>

For having n items in a row with flexboxes, the below answers may give you more information:

Having trouble getting images to wrap with flexbox

2 Answers2