我的问题是，我在制作了一个 Flexbox 的 article 中有一个 section，当我减小浏览器的大小时，该 Flexbox 中的这 3 个元素将重叠。有什么建议吗？
body {
display: flex;
flex-direction: column;
}
header {
background: blue;
}
main {
display: flex;
flex-direction: row;
flex: auto;
}
article {
flex: 2;
overflow-y: auto;
background: red;
}
aside {
flex: 1;
overflow-y: auto;
background: green;
}
.test {
display: flex;
flex-direction: row;
flex: auto;
align-items: stretch;
background: pink;
}<body>
<header>
Test
</header>
<main>
<article>
<section>
test
</section>
<section class="test">
<div>
div one
</div>
div two
<div>
div three
</div>
<div>
</div>
</section>
</article>
<aside>
aside
</aside>
</main>
<footer>
</footer>
</body>最佳答案
尝试添加flex-wrap: wrap到 flex 容器。 Flex 元素默认不换行。
引用your website (我没有使用您的 fiddle demo ，它有不同的代码)，每个非包装元素都是 <section> <section class="other"> 的 child ，这是一个行方向、启用换行的 Flex 容器。
每个<section> flex 元素有 flex: 1应用。这转化为:
-
flex-grow: 1 -
flex-shrink: 1 -
flex-basis: 0
与 flex-basis设置为零，则 Flex 元素的初始主尺寸为 0，并且宽度可能会缩小到该程度，因此没有机会换行。
我建议更改 flex-basis: 0类似 flex-basis: calc(33% - 2em) (即宽度减去大约边距、边框、填充)，适用于更宽的屏幕。所以flex: 1 1 calc(33% - 2em) .
然后，对于较小的屏幕，使用媒体查询，设置 flex-basis类似:
@media screen and ( max-width: 500px ) {
.fitness, .education, .pastimes {
flex-basis: 100%;
display: flex; /* optional; for nicer alignment */
flex-direction: column; /* optional; for nicer alignment */ }
}
或者，如果您想避免使用媒体查询，可以将固定值设置为 flex-basis这也将启用换行。类似 flex: 1 0 200px .
关于html - Flex 元素未包裹，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33618493/