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
How to Declare a Variable in a Template in Angular
Woocommerce Change Product Image on Hover With CSS
Vertically Align Text Next to an Image
Are (Non-Void) Self-Closing Tags Valid in Html5
How to Use a :Before or :After Pseudo-Element on an Input Field
First Name Validation Using HTML 5 Pattern
Html Wont Link to CSS File in Visual Studio Code
Change Default Text in Input Type="File"
How to Put CSS @Media Rules Inline
Fixed Headers on Scroll Inst Working Correctly in Angular Application
How to Get an Iframe to Be Responsive in iOS Safari
Displaying Comma Separated String in Angular 6
How to Give Text or an Image a Transparent Background Using Css
Angular 5 File Upload: Failed to Set the 'Value' Property on 'Htmlinputelement'
Absolute Div Height Being Cut Off Inside Relative Div
Print Page Numbers on Pages When Printing HTML
How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)