浏览器之间不一致的flexbox布局（Chrome浏览器和Safari浏览器）

Question

我一直在拼凑一个块，它将在网格中显示来自WordPress的最新帖子（Twitter Bootstrap），并且我决定首次使用flexbox进行游戏。

我开始慢慢地了解它，但我发现Chrome和Safari显示的内容有所不同。

我错过了什么吗？

HTML

<div class="col-xs-12 forcontent element-contents element-latest-posts" role="document"> 
     <div class="content row"> 



       <div class="latest-posts "> 


<div class="row"> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/yet-another-test-post/">Yet another test post</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/yet-another-test-post/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/05/180H.jpg" class="attachment-post-thumbnail wp-post-image" alt="180H">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non me</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:03:00+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 23 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/yet-another-test-post/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/another-test-post/">Another Test Post</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/another-test-post/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/05/188H.jpg" class="attachment-post-thumbnail wp-post-image" alt="188H">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:02:29+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 24 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/another-test-post/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/a-large-post/">A large Post</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/a-large-post/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/04/slide-3.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-3">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:16:54+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/a-large-post/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/test/">test</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/test/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/05/168H.jpg" class="attachment-post-thumbnail wp-post-image" alt="168H">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:14:06+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/test/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/hello-world/">Hello world!</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/hello-world/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/04/slide-6.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-6">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit ali</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-03-19T14:48:48+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="19th March, 2015"><i class="fa fa-clock-o"></i> Posted 7 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/hello-world/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 

</div> 

LESS

.element-latest-posts { 

    .latest-posts .row { 
     display: flex; 
     flex-flow: row wrap; 
     justify-content: flex-start; 

    } 


    article { 
     flex: 0 auto; 
     // flex: 1 auto; 

     margin-bottom: 15px; 

     &:first-of-type { 
      flex: 1 auto; 
     } 

     &:last-of-type { 
      flex: 0 auto; 
     } 

     display: flex; 
     flex-flow: column; 
     justify-content: flex-start; 

     section { 
      flex: 1 auto; 

      &.featured-image { 
       // display: none; 
       a { 
        display: block; 

        &:hover { 
         transform: scale(0.8); 
         outline-width: 0 !important; 
        } 

        img { max-width: 100%; } 
       } 
      } 

      &.entry-summary { 
       display: flex; 
       flex-flow: column; 
       justify-content: center; 

       &.no-featured-image {} 

       span { 
        flex: 1 auto; 
       } 
      } 
     } 

     footer { 
      a { 
       &.btn { 
        &:hover { border-color: transparent; } 
       } 
      } 
     } 



    } 
} 

屏幕截图

Safari Chrome

任何想法，为什么这是？

感谢

Answer 1

首先，你的引导是不正确的。你不应该在没有列之间的行内有一行。而且你永远不应该有一列没有一行。你也不应该有在每个中断点加起来超过十二个的列。

这是错误的：

<div class="row"> 
    <div class="row"></div> 
</div> 

这也是错误的：

<div class="col-xs-8"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 
<div class="col-xs-4"></div> 

为了保持引导正常工作，该唯一，可以是一排的孩子是一个列，并且列的直接父级必须是一行。这是因为列浮动并且该行清除浮动。

这是正确的：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-8"> 
     <div class="row"> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4"></div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4"></div> 
     </div> 
    </div> 
    <div class="col-xs-4"></div> 
    </div> 
</div> 

其次，你不需要在这里指定col-xs-12：<article class="col-xs-12 col-md-4">。所有col-xs-12确实是说“width：100％”，它已经通过块级元素被应用。

第三，您应该使用container或container-fluid向边缘添加左侧和右侧填充（而不是col-xs-12）。

第四，::before和::after（该行的clearfix的一部分）计为该行的子级。这意味着如果您在该行上使用display: flex，则它也会将flexbox应用于::before和::after伪元素。

最后，Safari仍然需要供应商前缀。

这里是更新的笔与它在Safari工作：http://codepen.io/anon/pen/rOYxNG（请注意，“Autoprefixer”在CSS选项被选中）

Answer 2

我注意到，你不带class =行一个div包住外柱（引导COL）。我非常确定，在使用引导程序时，您应始终使用包装列的行。