Question

FMI，旧的flexbox不支持flex-wrap属性。在Android 4.3和Safari 6等旧浏览器中没有包装。它在一行中显示一些弹性容器子项并裁剪剩余的子项。

有哪些替代/后备解决方案？

Answer 1

http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

只是不要使用Flexbox并尝试用CSS来解决你的布局问题，它有更广泛的跨浏览器支持（特别是向后），并且对于不支持的浏览器优雅地降级，而不需要Javascript以某种方式使它成为工作

Answer 2

您可以使用Modernizr Script检测浏览器是否支持flex-wrap属性，然后您可以创建回退解决方案。

官方网页链接：https://modernizr.com/docs 好文章：http://www.westofwonder.com/2014/02/cross-browser-flex-box-for-responsive-design/

Answer 3

如果您想要flex-wrap替代方案，则应使用display: inline-block;。但是display: inline-block;并不完美。因此，您应该像下面的代码一样设计标记。

<div class="list">
  <div class="list__flex-container">
    <div class="list__flex-item">Item 1</div>
    <div class="list__flex-item">Item 2</div>
    <div class="list__flex-item">Item 3</div>
  </div>
  <div class="list__flex-container">
    <div class="list__flex-item">Item 4</div>
    <div class="list__flex-item">Item 5</div>
    <div class="list__flex-item">Item 6</div>
  </div>
</div>

旧版浏览器中的CSS flexbox包装

3 个答案: