为什么在低于 800px 的分辨率下,flex-direction 不会改变?这些项目仍然在一排。如果我想更改不同分辨率的顺序,也会发生同样的情况。
这是 HTML 和 CSS:
body {
font-weight: bold;
text-align: center;
font-size: 16px;
box-sizing: border-box;
}
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article,
.aside {
border: 1px solid black;
}
article {
width: 50%;
}
.aside {
width: 24%;
}
@media screen and (max-width: 800px) {
main {
flex-direction: column;
}
main>* {
width: 100%;
}
}
<body>
<main>
<article class="main-article">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
</main>
</body>
弯曲方向实际上正在正确改变,问题是你有.aside
媒体查询之外和媒体查询内部的类,您正在使用*
外卡。班级始终优先于通配符。所以,你本质上是在做.aside
即使小于 800 像素的项目也能达到 24%。
body {
font-weight: bold;
text-align: center;
font-size: 16px;
box-sizing: border-box;
}
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article,
.aside {
border: 1px solid black;
}
article {
width: 50%;
}
.aside {
width: 24%;
}
@media screen and (max-width: 800px) {
main {
flex-direction: column;
}
main > *,
main > .aside {
width: 100%;
border-color: yellow;
}
}
<body>
<main>
<article class="main-article">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
</main>
</body>
正如您所看到的,侧面现在是全宽的,并且位于列方向。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)