弹性物品不包装 [英] Flex items not wrapping
问题描述
我的问题是，在文章中有一个 section ，我创建了一个flexbox，当我减小浏览器的大小时，该flexbox中的这三个元素将交叠.有提示吗?
My issue is that I have a section within the article that I made a flexbox, and when I reduce the size of the browser those 3 elements in that flexbox will overlap. Any tips?
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容器中.弹性项目默认情况下不会自动包装.
Try adding flex-wrap: wrap to the flex container. Flex items do not wrap by default.
参考您的网站(我没有使用您的，这是行方向的，启用包装的Flex容器.
In reference to your website (I didn't use your fiddle demo, which has different code), each of the non-wrapping elements is a <section> child of <section class="other">, which is a row-direction, wrap-enabled flex container.
每个< section> flex项目都应用了 flex:1 .转换为:
Each <section> flex item has a flex: 1 applied. This translates to:
-
flex-grow:1 -
弯曲收缩:1 -
flex-basis:0
在 flex-basis 设置为零的情况下，flex项的初始主尺寸为0，并且宽度可以缩小到该程度，因此没有机会包装.
With flex-basis set to zero, the initial main size of the flex item is 0, and the width could shrink to that degree, so there's no opportunity to wrap.
我建议将 flex-basis:0 更改为 flex-basis:calc(33％-2em)(即宽度减去大约边距，边框)，填充)，以适应更大的屏幕.所以 flex:1 1 calc(33％-2em).
I would suggest changing flex-basis: 0 to something like flex-basis: calc(33% - 2em) (i.e., width minus approx. margin, border, padding), for wider screens. So flex: 1 1 calc(33% - 2em).
然后对于较小的屏幕，使用媒体查询，将 flex-basis 设置为类似以下内容:
And then for smaller screens, using a media query, set flex-basis to something like:
@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 .
Alternatively, if you wanted to avoid using media queries, you could set a fixed value to flex-basis which would enable wrap, as well. Something like flex: 1 0 200px.
这篇关于弹性物品不包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
