弹性物品不包装 | 弹性物品不包装

本文介绍了弹性物品不包装的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的问题是，在文章中有一个 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>

http://jsfiddle.net/zLmcyjy6/

推荐答案

尝试将 flex-wrap:wrap 添加到flex容器中.弹性项目默认情况下不会自动包装.

Try adding flex-wrap: wrap to the flex container. Flex items do not wrap by default.

参考您的网站(我没有使用您的小提琴演示(具有不同的代码)，每个非包装元素都是< section> 的子元素>< section class ="other"> ，这是行方向的，启用包装的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.

这篇关于弹性物品不包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！