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="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></div> <div><img src="http://i.imgur.com/60PVLis.png" alt="Sample Image"></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>
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
.
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>
Related Topics
Arrange 2 Items Per Row Using Flexbox
How to Get The Parent Url from an Iframe's Content
How to Change Text Selection Color in UIwebview iOS
Firefox: :-Moz-Selection Selector Bug() Is There a Workaround
Textarea to Fill a Parent Container Exactly, with Padding
Cutting Image Diagonally with CSS
Facebook Share Doesn't Show My Description or My Thumbnail
How to Render Svg Elements with Crisp Edges While Still Keeping Anti-Aliasing
Styling The Placeholder in a Textfield
Working with Canvas in Different Screen Sizes
How Is Column Width Determined in Browser
Why Is These Flex Items Not Wrapping
How to Create a 100% Screen Width Div Inside a Container in Bootstrap
Set Div to Remaining Height Using CSS with Unknown Height Divs Above and Below
Parallax Scrolling with CSS Only
Emoji Rendered in Chrome Have Different Widths Than in Other Browsers