Question

尝试使用flexbox为wordpress主题创建一个具有定义的最大宽度和相同高度侧边栏的流体居中内容区域。事情就像Safari，Firefox和Chrome中的魅力一样，但在资源管理器中却完全不合时宜。

工作示例（在safari，fire ......等）

http://nicklasbryntesson.se/test/Flexbox%20Vs%20Table/layout-flex.html

内容区的基本结构：

<header id="masthead" class="site-header" role="banner">
  <h1>Header</h1>
</header><!-- #masthead -->


  <div id="content" class="site-content">

    <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">

        <article>

          <h1>The Content</h1>

        </article><!-- #post-## -->

      </main><!-- #main -->
    </div><!-- #primary -->

    <div id="secondary" class="widget-area" role="complementary">

      <h2 class="widget-title">Sidebar</h2>

    </div><!-- #secondary -->

  </div><!-- #content -->

<footer id="colophon" class="site-footer" role="siteinfo">
  <h1>footer</h1>
</footer>

宽屏幕的基本CSS：

@media screen and (min-width: 50em) {

.site-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.site-main {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
.widget-area {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 18em;
            flex: 0 0 18em;
}
.content-area {
    max-width: 40em;
    height: 100%;
    margin: 0 auto;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

}

我已准备好对此嗤之以鼻，似乎无法弄清楚是否存在前缀错误，或者我是否针对错误的div。

Answer 1

从flex: 1删除#primary.content-area（和前缀等效物）。

IE，它充满了灵活的bug，不喜欢它。它的删除应该对其他浏览器没有影响。

Answer 2

这是因为IE尤其存在使用flex儿童的内在大小调整的问题。与供应商前缀并不真正相关（事实上，除非您需要支持旧的Android原生浏览器或旧版Safari，否则您不再需要供应商前缀）

首先查看flexbugs，看看您的问题是否存在。但是，我也会提出这些建议：

.site-content {
   display: flex;
   justify-content: space-between;
}

.content area {
  max-width: 40em; 
  display: flex;
  margin: 0 auto;
}

我不建议将margin:auto与flexbox子项一起使用。我刚刚了解到margin:auto 是 flexbox，但我建议明确使用flex属性：声明单个属性，而不是简写;设置显式边距，而不是auto。它使代码更具可读性和直接性。

更正资源管理器的Flexbox前缀

2 个答案: