弹性项目不包装

Question

我的问题是我在 article 中有一个 section 我制作了一个 flexbox，当我减小浏览器的大小时，该 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>

http://jsfiddle.net/zLmcyjy6/

Answer 1

尝试将 flex-wrap: wrap 添加到弹性容器中。弹性项目默认不换行。

参考 your website (I didn't use your fiddle demo，它有不同的代码），每个非换行元素都是 <section class="other"> 的 <section> 子元素，它是行方向，换行-启用弹性容器。

每个 <section> 弹性项目都应用了 flex: 1。这转化为：

flex-grow: 1
flex-shrink: 1
flex-basis: 0

flex-basis 设置为零时，弹性项目的初始主尺寸为 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.

弹性项目不包装

Flex items not wrapping

html

css

flexbox