Css Can'；即使在使用flex wrap后，也不要垂直堆叠flex项目
我正在使用flexbox水平对齐3个项目。当视口的大小与桌面的大小相同时，section元素下类为Css Can'；即使在使用flex wrap后，也不要垂直堆叠flex项目,css,flexbox,Css,Flexbox,我正在使用flexbox水平对齐3个项目。当视口的大小与桌面的大小相同时，section元素下类为.main的3个旁边的项将对齐 当我在桌面浏览器上手动缩小视口时，我希望这三个flex项彼此垂直堆叠 我已经为父容器使用了display:flex，以及flex direction:rowflex wrap:wrap 我的问题是，当我缩小视口宽度时，这三个flex项彼此相邻，因此变得更窄。它们没有像预期的那样垂直堆叠 任何想法都会有帮助 这是html <!DOCTYPE HTML> &l
.main旁边的项将对齐
当我在桌面浏览器上手动缩小视口时，我希望这三个flex项彼此垂直堆叠
我已经为父容器使用了display:flex
，以及flex direction:row
flex wrap:wrap
我的问题是，当我缩小视口宽度时，这三个flex项彼此相邻，因此变得更窄。它们没有像预期的那样垂直堆叠
任何想法都会有帮助
这是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>
看起来您将flex-direction:row
与flex-direction:column
混淆了！如果要将它们堆叠在一列中，请使用列弹性方向：）看起来您将弹性方向：行
与弹性方向：列
混淆了！如果要将它们堆叠在一列中，请使用列弹性方向：）为它们指定最小宽度
.main aside{
padding: 0 1%;
flex-basis: 30%;
min-width: 300px;
}
样品
/*用于屏幕的CSS文档*/
@导入url（'https://fonts.googleapis.com/css?family=Open+Sans'）；
@导入“reset.css”；
/*将自然长方体布局模型应用于所有图元，但允许修改零部件*/
*，*：之前，*：之后{
框大小：继承；
}
html{
框大小：边框框；
字体大小：16px；
}
身体{
字体系列：“开放式Sans”，无衬线；
}
#页面{
边缘：2米；
}
h1，h2，h3，h4{
字号：700；
}
h1{
边际：0.01米0；
字号：2.8em；
}
氢{
保证金：0.5em0；
字号：1.6em；
}
h3{
字体大小：1.3em；
保证金：0.5em0；
}
h4{
字号：1em；
保证金：0.1.5em 0；
}
p{
边际：0.01米0；
}
a{
颜色：#007eff；
}
a:参观了{
颜色：#65b1ff
}
/*标题样式*/
标题{
背景：url（'graphics/banner_1200.jpg'）中间/封面不重复；
显示器：flex；
高度：430px；
证明内容：周围的空间；
/*填料：2米*/
}
.标志{
高度：66px；
宽度：160px；
}
.英雄{
弹性基准：42%；
自对准：居中；
}
.英雄h1{
颜色：#fff；
线高：1.05em；
}
/*剖面样式*/
梅因先生{
保证金：4em；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
}
1.主菜{
填充：0.1%；
弹性基准：30%；
最小宽度：300px；
}
.main放在一边。内容h3{
边缘底部：1.45em；
}
.main放在一边{
线高：1.5em；
}
创建响应性Web设计
添加自然纹理的兴趣
Lorem ipsum dolor sit amet，是一位杰出的献身者，孕妇，大菱鲆，非土耳其人
Morbi commodo，ipsum sed pharetra predida，orci magna rhoncus neque，id pulvinar odio lorem non turpis。我坐在这儿。Lorem ipsum dolor sit amet，奉献
我坐在这儿。洛雷姆·伊普苏姆·多洛·希特·阿梅特是一位杰出的献身者。莫比·康莫多，怀孕的女性，女性，男性，女性
Lorem ipsum door sat amet conse ctetuer adipiscing elite。莫比·科摩德坐在阿梅特的位子上，供奉着一位贵族
作者姓名企业名称公司
-
-
-
-
-
-
-
-
-
-
-
给他们一个最小宽度
.main aside{
padding: 0 1%;
flex-basis: 30%;
min-width: 300px;
}
样品
/*用于屏幕的CSS文档*/
@导入url（'https://fonts.googleapis.com/css?family=Open+Sans'）；
@导入“reset.css”；
/*将自然长方体布局模型应用于所有图元，但允许修改零部件*/
*，*：之前，*：之后{
框大小：继承；
}
html{
框大小：边框框；
字体大小：16px；
}
身体{
字体系列：“开放式Sans”，无衬线；
}
#页面{
边缘：2米；
}
h1，h2，h3，h4{
字号：700；
}
h1{
边际：0.01米0；
字号：2.8em；
}
氢{
保证金：0.5em0；
字号：1.6em；
}
h3{
字体大小：1.3em；
玛格