Why are my flex items not wrapping?

Question

So I have added 3 images within their own flex-item divs, and they all sit inside a flex-container div, the images scale as I make the browser window smaller, however they all remain inline rather than wrapping and becoming a single column, any idea on how to make them wrap?. This is how it looks:

div class="intro">
    <section id="intro-box">
      <h2>In a nutshell</h2>
      <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened
        in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p>
      <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand
        beaches.
      </p>
      <div class="flex-container">
        <!--Photo from: www.santorinicrystalblue.com -->
        <div class="flex-item"><img class="img-fluid" src="media/sontorini-greece.jpg"></div>
        <!--Photo from: www.static2.traveltek.net -->
        <div class="flex-item"><img class="img-fluid" src="media/santorini-view-1.jpg"></div>
        <!--Photo from: www.mylossantorini.com-->
        <div class="flex-item"><img class="img-fluid" src="media/santorini-restaurant.jpg"></div>
      </div>
    </section>
  </div>
</main>

This is the CSS:

    /* Flexbox */

.intro .flex-container {
  width: 100%;
  display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.intro .flex-item {
  width: 30%;
  flex-direction: column;
}

.intro .img-fluid {
  width: 90%;
  padding: 2rem 0rem 2rem 0rem;
}

Thanks in advance!

You're telling flex items to have `width: 30%`. That's 30% of the parent (the flex container). So even if the parent is 6px wide, each item will take 30% of that, and they will never wrap. Instead, use either fixed widths or a media query. — Michael Benjamin, Jun 25 '17 at 02:29

score 5 · Accepted Answer · answered Jun 25 '17 at 02:13

You need to use a media query to change the width of .flex-item. Unless you do this, it will always make them 30% of the window so they'll never wrap.

I included an example where I replaced your images with some stock images and included a media query to make it wrap at 600px.

  /* Flexbox */

.intro .flex-container {
  width: 100%;
  display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.intro .flex-item {
  width: 30%;
  flex-direction: column;
}

.intro .img-fluid {
  width: 90%;
  padding: 2rem 0rem 2rem 0rem;
} 

@media screen and (max-width:600px) {
  .intro .flex-item {
    width:50%;
  }
}

<div class="intro">
    <section id="intro-box">
      <h2>In a nutshell</h2>
      <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened
        in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p>
      <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand
        beaches.
      </p>
      <div class="flex-container">

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>
      </div>
    </section>
  </div>

bhv · Answer 2 · 2017-06-28T15:48:33.177

0

two solutions for you problem..

you can use media queries or

you can change the width of image form % to px or similar units
so that browser will try to maintain the given width
if width given in percentage it will try to decrease or increase the size of the image so there is no space for wrapping

edited Jun 28 '17 at 15:48

answered Jun 25 '17 at 02:59

bhv

5,188
3
35
44

Why are my flex items not wrapping?

2 Answers2

Linked

Related