Why Are Flex Items Not Wrapping

Why are flex items not wrapping?

An initial setting of a flex container is flex-wrap: nowrap.

This means that when you create a flex container (by applying display: flex or display: inline-flex to an element) all child elements ("flex items") are confined to a single line.

To enable flex items to wrap use flex-wrap: wrap.


Here are a few examples of how flex properties work:

A simple flex container with various flex items containing an image:

#list-wrapper {    display: flex;    border: 1px solid black;}
#list-wrapper div {}
#list-wrapper div img { height: 150px; width: 150px;}
<div id="list-wrapper">    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div></div>

Why are my flex items not wrapping?

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>

Flex-wrap is not wrapping when I reduce the window size

You need to use max-width instead of width on the container, you have to allow the container to shrink for the items to wrap.

body {  font-family: arial;}
p { color: white;}
.container { background-color: #666; max-width: 800px; height: 200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center;}
.item { padding: 10px; box-sizing: border-box;}
.item1 { flex: 1; background-color: red;}
.item2 { flex: 1; background-color: blue;}
.item3 { flex: 1; background-color: green;}
<div class="container">
<div class="item item1"> <h1>ITEM1</h1> <p>flex: 1</p> </div>
<div class="item item2"> <h1>ITEM2</h1> <p>flex: 1</p> </div>
<div class="item item3"> <h1>ITEM3</h1> <p>flex: 1</p> </div>
</div>

Why is these flex items not wrapping?

Your flex items in the nested container are sized with percentages.

.col-one{
width: 40%;
height: 100px;
border: 1px solid lightgreen;
}
.col-two{
width: 40%;
height: 100px;
border: 1px solid red;
}

Because percentage lengths are based on the length of the parent they have no reason to wrap. They will always be 40% of the parent, even if the parent has a width of 1%.

If you use other units for length, such as px or em, they will wrap.

jsFiddle demo

 .container {   display: flex;   justify-content: center;   align-items: center;   flex-flow: row wrap;   height: 100vh; }  .sub-con {   flex: 1;  /* for demo only */   align-content: flex-start; /* for demo only */   margin-right: 50px;   margin-left: 50px;   height: 500px;   background-color: #fff;   display: flex;   justify-content: center;   flex-flow: row wrap; }  .col-one {   width: 200px;   height: 100px;   border: 1px solid lightgreen; }  .col-two {   width: 200px;   height: 100px;   border: 1px solid red; }
<div class="container">  <div class="sub-con">    <div class="col-one"></div>    <div class="col-two"></div>  </div></div>

Flexbox shrinking and not wrapping

You defined the width for your flex items (.left and .right) at 45%, so they will always remain 45% wide and therefore never wrap.

You can add a min-width to avoid that - see my example below, where I added min-width: 400px to these two elements.

.page4 {  height: 100%;  width: 100%;  margin: auto;}
h2 { text-align: center; margin: 0 auto; width: 65%;}
.flex-content { margin: auto; display: flex; flex-shrink: 0; width: 80%; height: 500px; margin-top: 30%;}
.left { align-items: center; display: block; float: left; padding-right: 5px; background-color: blue; width: 45%; min-width: 400px; height: 500px;}
.background { background-image: url('../pictures/weenies/longpaper.png');}
.right { align-items: center; display: block; float: right; background-color: red; width: 45%; min-width: 400px; height: 500px;}
.wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap;}
#logopg4 { height: 300px; width: 300px;}
.logopg4 { text-align: center; display: block;}
<div class="page4">  <div class="flex-content wrap">    <div class="left">      <div class="subs">        <h2>Subs N'</h2>        <h2>Sandwiches</h2>        <div class="subsNSandwiches background">
</div> </div> <div class="hen"> <h2>Hen House</h2> <div class="henpaper background">
</div> </div> <div class="deezerts"> <h2>DEEZERTS</h2> <div class="deezertspaper background">
</div> </div> </div> <div class="right"> <div class="logopg4"> <img src="./pictures/subs/logo2.png" id="logopg4" /> </div> <div class="rabbit"> <h2>Rabbit Fixin's</h2> <div class="rabbitFixins background">
</div> </div> <div class="xtraFixins"> <h2>Xtra Fixin's</h2> <div class="xtrapaper background">
</div> </div> </div> </div></div>

Flex items not wrapping in a column direction container

Apply total height on ul and make it wrap.

Then apply flex-basis on ul li (which is height because we've applied flex-direction: column) to 50%. Like:

ul {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100px;
}
ul li {
flex-basis: 50%; /* which in this case will be '50px' */
}

Have a look at the snippet below:

ul {  list-style: none;  margin: 0;  padding: 0;  display: flex;  flex-wrap: wrap;  flex-direction: column;  height: 100px;}ul li {  flex-basis: 50%;}
<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li></ul>

Flex items not wrapping

Try adding flex-wrap: wrap to the flex container. Flex items do not wrap by default.


In reference to your website (I didn't use your fiddle demo, which has different code), each of the non-wrapping elements is a <section> child of <section class="other">, which is a row-direction, wrap-enabled flex container.

Each <section> flex item has a flex: 1 applied. This translates to:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

With flex-basis set to zero, the initial main size of the flex item is 0, and the width could shrink to that degree, so there's no opportunity to wrap.

I would suggest changing flex-basis: 0 to something like flex-basis: calc(33% - 2em) (i.e., width minus approx. margin, border, padding), for wider screens. So flex: 1 1 calc(33% - 2em).

And then for smaller screens, using a media query, set flex-basis to something like:

@media screen and ( max-width: 500px ) {
.fitness, .education, .pastimes {
flex-basis: 100%;
display: flex; /* optional; for nicer alignment */
flex-direction: column; /* optional; for nicer alignment */ }
}

Alternatively, if you wanted to avoid using media queries, you could set a fixed value to flex-basis which would enable wrap, as well. Something like flex: 1 0 200px.

Flex item not going to next row (not wrapping)

An initial setting of a flex container is flex-wrap: nowrap. This means that flex items, by default, are forced to remain on a single line.

You can override the default by adding flex-wrap: wrap to the container (revised demo).

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Flex lists not wrapping

you need to use flex-wrap class with d-flex. codepen

<ul class="list-unstyled d-flex flex-wrap">
<li><div class="list-box"></div></li>
<li><div class="list-box"></div></li>
<li><div class="list-box"></div></li>
......
</ul>

About Flex wrap

The CSS flex-wrap property specifies whether flex items are forced
into a single line or can be wrapped onto multiple lines. If wrapping
is allowed, this property also enables you to control the direction in
which lines are stacked.



Related Topics



Leave a reply



Submit