我正在使用flexbox水平对齐3个项目。当视口是桌面的大小时，具有类aside的section元素下的3 .main项对齐。
当我手动缩小桌面浏览器上的视口时，我希望三个flex项目垂直叠加在一起。
我已将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;
}
答案 0 :(得分：2)
给他们一个min-width
.main aside{
padding: 0 1%;
flex-basis: 30%;
min-width: 300px;
}
样品
/* 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>
或使用媒体查询切换弹性方向
@media screen and (max-width: 600px) {
.main{
flex-direction: column;
}
}
样品
/* 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>
答案 1 :(得分：1)
您似乎将flex-direction: row与flex-direction: column混淆了！如果要将它们堆叠在一列中，请使用column flex方向：）