Johnny G.
Reputation: 525
Can't stack flex items vertically even after using flex-wrap
I'm using flexbox to align 3 items horizontally. The 3 aside items under the section element with the class of .main are aligned across when the viewport is the size of the desktop's.
I want for the three flex-items to stack vertically on top of each other as I manually shrink the viewport on my desktop browser.
I've used display: flex for the parent container as well as flex-direction: row flex-wrap: wrap
My problem is that as I shrink the viewport width, the three flex-items just get narrower as they're next to each other. They don't stack vertically as expected.
Any ideas would help!
here's the html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href = "screen.css">
<title>Creating a Responsive Web Design</title>
</head>
<body>
<div id = "page">
<header>
<a class ="logo" href="#" title="Everyday Things">
<img src="graphics/logo.svg" />
</a>
<div class="hero">
<h1>Add interest with natural textures</h1>
<a class="btn" title="Get advice from top designers" href="#">Get advice from top designers</a>
</div>
</header>
<section class="main">
<aside>
<div class="content">
<h3><a href="#">What's trending</a></h3>
<p>Lorem ipsum dolor sit amet, consect etuer adipiscing elit. <a href="http://codifydesign.com">Morbi commodo</a>, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
</div>
</aside>
<aside>
<div class="content">
<h3><a href="#">Where to find it</a></h3>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>
</div>
</aside>
<aside>
<div class="content">
<h3><a href="#">Tools of the trade</a></h3>
<p>Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci rhoncus neque, id pulvinar odio.</p>
</div>
</aside>
</section>
<section class="atmosphere">
<article>
<h2>Creating a modern atmosphere</h2>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Lorem ipsum dolor sit amet etuer adipiscing elit. Pulvinar odio lorem non turpis. Nullam sit amet enim lorem.</p>
<a href="#" title="Creating a modern atmosphere">Learn More</a>
</article>
</section>
<section class="how-to">
<aside>
<div>
<img src="graphics/photo_seating.jpg"/>
<h4>How-To: Seating</h4>
<p>Consectetuer adipiscing elit. Morbi commodo ipsum sed gravida orci magna rhoncus pulvinar odio lorem.</p>
<a title="Learn how to choose the proper seating." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<aside>
<div>
<img src="graphics/photo_lighting.jpg"/>
<h4>How-To: Lighting</h4>
<p>Morbi commodo, ipsum sed pharetra gravida magna rhoncus neque id pulvinar odio lorem non turpis nullam sit amet.</p>
<a title="Learn how to choose the proper lighting." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<blockquote>
<p class="quote">Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit.</p>
<p class="credit">Author Name Business Title Company</p>
</blockquote>
</section>
<nav>
<ul>
<li>
<a href="#">About Us</a>
<ul>
<li>
<a href="#">sub-link-one</a>
</li>
<li>
<a href="#">sub-link-two</a>
</li>
<li>
<a href="#">sub-link-three</a>
<ul>
<li>
<a href="#">sub-sub-link-one</a>
</li>
<li>
<a href="#">sub-sub-link-two</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Design Corner</a>
<ul>
<li>
<a href="#">sub-link-one</a>
</li>
<li>
<a href="#">sub-link-two</a>
</li>
</ul>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</nav>
<footer></footer>
</div>
</body>
</html>
Here's the css:
/* CSS Document for Screens */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import 'reset.css';
/* apply a natural box layout model to all elements, but allowing components to change */
*, *:before, *:after {
box-sizing: inherit;
}
html{
box-sizing: border-box;
font-size: 16px;
}
body{
font-family: 'Open Sans', sans-serif;
}
#page{
margin: 2em;
}
h1, h2, h3, h4{
font-weight: 700;
}
h1{
margin: 0 0 1em 0;
font-size: 2.8em;
}
h2{
margin: 0 0 0.5em 0;
font-size: 1.6em;
}
h3{
font-size: 1.3em;
margin: 0 0 0.5em 0;
}
h4{
font-size: 1em;
margin: 0 0 1.5em 0;
}
p{
margin: 0 0 1em 0;
}
a{
color: #007eff;
}
a:visited{
color: #65b1ff
}
/*header styles*/
header{
background: url('graphics/banner_1200.jpg') center center/cover no-repeat;
display: flex;
height: 430px;
justify-content: space-around;
/*padding: 2em;*/
}
.logo{
height: 66px;
width: 160px;
}
.hero{
flex-basis: 42%;
align-self: center;
}
.hero h1{
color: #fff;
line-height: 1.05em;
}
/*Section styles*/
.main{
margin: 4em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.main aside{
padding: 0 1%;
flex-basis: 30%;
}
.main aside .content h3{
margin-bottom: 1.45em;
}
.main aside .content p{
line-height: 1.5em;
}
Upvotes: 1
Views: 345
Answers (2)
Asons
Reputation: 87191
Give them a min-width
.main aside{
padding: 0 1%;
flex-basis: 30%;
min-width: 300px;
}
Sample
/* CSS Document for Screens */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import 'reset.css';
/* apply a natural box layout model to all elements, but allowing components to change */
*, *:before, *:after {
box-sizing: inherit;
}
html{
box-sizing: border-box;
font-size: 16px;
}
body{
font-family: 'Open Sans', sans-serif;
}
#page{
margin: 2em;
}
h1, h2, h3, h4{
font-weight: 700;
}
h1{
margin: 0 0 1em 0;
font-size: 2.8em;
}
h2{
margin: 0 0 0.5em 0;
font-size: 1.6em;
}
h3{
font-size: 1.3em;
margin: 0 0 0.5em 0;
}
h4{
font-size: 1em;
margin: 0 0 1.5em 0;
}
p{
margin: 0 0 1em 0;
}
a{
color: #007eff;
}
a:visited{
color: #65b1ff
}
/*header styles*/
header{
background: url('graphics/banner_1200.jpg') center center/cover no-repeat;
display: flex;
height: 430px;
justify-content: space-around;
/*padding: 2em;*/
}
.logo{
height: 66px;
width: 160px;
}
.hero{
flex-basis: 42%;
align-self: center;
}
.hero h1{
color: #fff;
line-height: 1.05em;
}
/*Section styles*/
.main{
margin: 4em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.main aside{
padding: 0 1%;
flex-basis: 30%;
min-width: 300px;
}
.main aside .content h3{
margin-bottom: 1.45em;
}
.main aside .content p{
line-height: 1.5em;
}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href = "screen.css">
<title>Creating a Responsive Web Design</title>
</head>
<body>
<div id = "page">
<header>
<a class ="logo" href="#" title="Everyday Things">
<img src="graphics/logo.svg" />
</a>
<div class="hero">
<h1>Add interest with natural textures</h1>
<a class="btn" title="Get advice from top designers" href="#">Get advice from top designers</a>
</div>
</header>
<section class="main">
<aside>
<div class="content">
<h3><a href="#">What's trending</a></h3>
<p>Lorem ipsum dolor sit amet, consect etuer adipiscing elit. <a href="http://codifydesign.com">Morbi commodo</a>, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
</div>
</aside>
<aside>
<div class="content">
<h3><a href="#">Where to find it</a></h3>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>
</div>
</aside>
<aside>
<div class="content">
<h3><a href="#">Tools of the trade</a></h3>
<p>Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci rhoncus neque, id pulvinar odio.</p>
</div>
</aside>
</section>
<section class="atmosphere">
<article>
<h2>Creating a modern atmosphere</h2>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Lorem ipsum dolor sit amet etuer adipiscing elit. Pulvinar odio lorem non turpis. Nullam sit amet enim lorem.</p>
<a href="#" title="Creating a modern atmosphere">Learn More</a>
</article>
</section>
<section class="how-to">
<aside>
<div>
<img src="graphics/photo_seating.jpg"/>
<h4>How-To: Seating</h4>
<p>Consectetuer adipiscing elit. Morbi commodo ipsum sed gravida orci magna rhoncus pulvinar odio lorem.</p>
<a title="Learn how to choose the proper seating." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<aside>
<div>
<img src="graphics/photo_lighting.jpg"/>
<h4>How-To: Lighting</h4>
<p>Morbi commodo, ipsum sed pharetra gravida magna rhoncus neque id pulvinar odio lorem non turpis nullam sit amet.</p>
<a title="Learn how to choose the proper lighting." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<blockquote>
<p class="quote">Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit.</p>
<p class="credit">Author Name Business Title Company</p>
</blockquote>
</section>
<nav>
<ul>
<li>
<a href="#">About Us</a>
<ul>
<li>
<a href="#">sub-link-one</a>
</li>
<li>
<a href="#">sub-link-two</a>
</li>
<li>
<a href="#">sub-link-three</a>
<ul>
<li>
<a href="#">sub-sub-link-one</a>
</li>
<li>
<a href="#">sub-sub-link-two</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Design Corner</a>
<ul>
<li>
<a href="#">sub-link-one</a>
</li>
<li>
<a href="#">sub-link-two</a>
</li>
</ul>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</nav>
<footer></footer>
</div>
</body>
</html>Or use a media query to switch the flex direction
@media screen and (max-width: 600px) {
.main{
flex-direction: column;
}
}
Sample
/* CSS Document for Screens */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import 'reset.css';
/* apply a natural box layout model to all elements, but allowing components to change */
*, *:before, *:after {
box-sizing: inherit;
}
html{
box-sizing: border-box;
font-size: 16px;
}
body{
font-family: 'Open Sans', sans-serif;
}
#page{
margin: 2em;
}
h1, h2, h3, h4{
font-weight: 700;
}
h1{
margin: 0 0 1em 0;
font-size: 2.8em;
}
h2{
margin: 0 0 0.5em 0;
font-size: 1.6em;
}
h3{
font-size: 1.3em;
margin: 0 0 0.5em 0;
}
h4{
font-size: 1em;
margin: 0 0 1.5em 0;
}
p{
margin: 0 0 1em 0;
}
a{
color: #007eff;
}
a:visited{
color: #65b1ff
}
/*header styles*/
header{
background: url('graphics/banner_1200.jpg') center center/cover no-repeat;
display: flex;
height: 430px;
justify-content: space-around;
/*padding: 2em;*/
}
.logo{
height: 66px;
width: 160px;
}
.hero{
flex-basis: 42%;
align-self: center;
}
.hero h1{
color: #fff;
line-height: 1.05em;
}
/*Section styles*/
.main{
margin: 4em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.main aside{
padding: 0 1%;
flex-basis: 30%;
}
.main aside .content h3{
margin-bottom: 1.45em;
}
.main aside .content p{
line-height: 1.5em;
}
@media screen and (max-width: 600px) {
.main{
flex-direction: column;
}
}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href = "screen.css">
<title>Creating a Responsive Web Design</title>
</head>
<body>
<div id = "page">
<header>
<a class ="logo" href="#" title="Everyday Things">
<img src="graphics/logo.svg" />
</a>
<div class="hero">
<h1>Add interest with natural textures</h1>
<a class="btn" title="Get advice from top designers" href="#">Get advice from top designers</a>
</div>
</header>
<section class="main">
<aside>
<div class="content">
<h3><a href="#">What's trending</a></h3>
<p>Lorem ipsum dolor sit amet, consect etuer adipiscing elit. <a href="http://codifydesign.com">Morbi commodo</a>, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
</div>
</aside>
<aside>
<div class="content">
<h3><a href="#">Where to find it</a></h3>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>
</div>
</aside>
<aside>
<div class="content">
<h3><a href="#">Tools of the trade</a></h3>
<p>Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci rhoncus neque, id pulvinar odio.</p>
</div>
</aside>
</section>
<section class="atmosphere">
<article>
<h2>Creating a modern atmosphere</h2>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Lorem ipsum dolor sit amet etuer adipiscing elit. Pulvinar odio lorem non turpis. Nullam sit amet enim lorem.</p>
<a href="#" title="Creating a modern atmosphere">Learn More</a>
</article>
</section>
<section class="how-to">
<aside>
<div>
<img src="graphics/photo_seating.jpg"/>
<h4>How-To: Seating</h4>
<p>Consectetuer adipiscing elit. Morbi commodo ipsum sed gravida orci magna rhoncus pulvinar odio lorem.</p>
<a title="Learn how to choose the proper seating." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<aside>
<div>
<img src="graphics/photo_lighting.jpg"/>
<h4>How-To: Lighting</h4>
<p>Morbi commodo, ipsum sed pharetra gravida magna rhoncus neque id pulvinar odio lorem non turpis nullam sit amet.</p>
<a title="Learn how to choose the proper lighting." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<blockquote>
<p class="quote">Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit.</p>
<p class="credit">Author Name Business Title Company</p>
</blockquote>
</section>
<nav>
<ul>
<li>
<a href="#">About Us</a>
<ul>
<li>
<a href="#">sub-link-one</a>
</li>
<li>
<a href="#">sub-link-two</a>
</li>
<li>
<a href="#">sub-link-three</a>
<ul>
<li>
<a href="#">sub-sub-link-one</a>
</li>
<li>
<a href="#">sub-sub-link-two</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Design Corner</a>
<ul>
<li>
<a href="#">sub-link-one</a>
</li>
<li>
<a href="#">sub-link-two</a>
</li>
</ul>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</nav>
<footer></footer>
</div>
</body>
</html>Upvotes: 2
Hum4n01d
Reputation: 1370
Looks like you confused flex-direction: row with flex-direction: column! If you want to stack them in a column, use the column flex direction :)
Upvotes: 1
Related Questions
- How do I get items in a div to stack vertically
- stack divs two by two with flex-wrap not wrapping
- Why isnt my flex wrap actually stacking my items on top of each other?
- Flex Box Divs Stacking instead of being horizontal
- Trouble stacking items horizontally and vertically in same flexbox container
- How to make flex items that are also flex containers stack horizontally?
- Flex container with divs children not stacking horizontally
- need items to stack while using flex
- Flex items lining up in a row (inline) but should stack vertically
- Flexbox not wrapping flex items