【发布时间】：2017-06-20 07:00:09
【问题描述】：
我正在使用 flexbox 水平对齐 3 个项目。当视口是桌面的大小时，section 元素下的 .main 类的 3 个 aside 项目对齐。
当我在桌面浏览器上手动缩小视口时，我希望三个 flex-item 垂直堆叠在一起。
我已经将display: flex 用于父容器以及flex-direction: row flex-wrap: wrap
我的问题是，当我缩小视口宽度时，三个弹性项目会变得更窄，因为它们彼此相邻。它们不会像预期的那样垂直堆叠。
任何想法都会有所帮助！
这是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>
这是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;
}
【问题讨论】：