Question

我的问题是我在section内有article我做了一个弹性箱，当我缩小浏览器的大小时，那个弹性箱中的3个元素会重叠。有什么提示吗？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

http://jsfiddle.net/zLmcyjy6/

Answer 1

尝试将flex-wrap: wrap添加到Flex容器中。默认情况下，Flex项目不会换行。

参考your website（我没有使用具有不同代码的fiddle demo），每个非包装元素都是<section> <section class="other">个孩子}，这是一个行方向，支持wrap的flex容器。

每个<section>展示广告素材都已应用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。

Flex项目不包装

1 个答案: