Question

我已经整理了一个块，它将在网格（Twitter Bootstrap）中显示来自WordPress的最新帖子，我决定玩＃＆＃39;第一次使用flexbox。

我慢慢地了解它，但我发现Chrome和Safari的显示方式不同。

我错过了什么吗？

HTML

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



    }
}

LESS

ImageView

屏幕截图

Safari Chrome

为什么会这样？

由于

Answer 1

我注意到你没有用class = row包装你的外部列（bootstrap col）。我很确定在使用bootstrap时你应该总是有行包装列。

Answer 2

首先，您的Bootstrap操作不正确。如果没有列之间的行，您不应该在一行内有一行。你应该永远不会有没有一行的专栏。你也应该没有在每个断点处加起来超过12的列。

这是错误的：

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

为了使Bootstrap正常工作，可以是行的子节点的唯一是列，并且列的直接父节点必须是行。这是因为列浮动，行清除浮动。

这是正确的：

<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都是“宽度：100％”，它已经作为块级元素应用。

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

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

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

以下是在Safari中使用它的更新笔：http://codepen.io/anon/pen/rOYxNG（请注意，在CSS选项中选中了“Autoprefixer”）

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

2 个答案: