iOS 移动浏览器和 OS X Safari 上的 Flexbox 奇怪行为

Posted 2023-03-07

【中文标题】iOS 移动浏览器和 OS X Safari 上的 Flexbox 奇怪行为

【英文标题】：Flexbox odd Behavior on iOS Mobile Browsers and OS X Safari

【发布时间】：2016-12-29 14:57:03

【问题描述】：

我是 Flexbox 的新手，因为我的工作必须支持 IE8，所以在这个项目之前我从来没有真正关心过它。

我试图弄清楚如何使“卡片”网格具有相同的高度。这些卡片内部包含不同数量的文本以及图像。由于我使用的是 AngularJS，因此完成这项工作的 javascript 解决方案的复杂性超出了我的时间，因此我选择了 flexbox。

这是我的卡片包装相关代码（如果您需要更多信息，请告诉我）：

.card-grid 
    display: -webkit-box;      /* OLD - ios 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    ...

    .data-card 
        height: auto;
        //IE fallback
        display: inline-block;
        //Modern Browsers
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

        ...

    

以下是上述选择器的相关 Angular html：

<div class="card-group">
    <ol class="cards card-grid invisible grid-row">
        <li ng-repeat... class="data-card col xs-6 md-4 lg-3">
            <a class="card" href="javascript:void(0)" ... >
                ...
            </a>
        </li>
    </ol>
</div>

这是 iOS 中 Chrome 和 Safari 的屏幕截图： 我面临的问题是，它显示第一张卡“轴向”，然后下一张卡“电机启动”应该就在它旁边。

我尝试过的事情：

将 wrap 属性放在项目本身而不是包装器上，这看起来很糟糕 定义宽度，并使用flex-grow，但轴向仅达到 100% 宽度，因此最后一张（未描绘）卡片旁边没有任何内容。 正在做wrap-reverse，但这只是颠倒了内容并给了我同样的问题。

然后我在 OS X 上打开了 Safari 并得到了这个：

它适用于：

Chrome（桌面） Firefox（桌面） Internet Explorer Edge（桌面） Chrome（安卓）

它唯一不起作用的地方是 Apple 浏览器（即 Chrome iOS 和 Safari Mobile 等）

所以我认为这是-webkit- 的事情，但这很明显。我只是不知道我在代码中做错了什么。我无法发布我的工作代码，因为该项目正在进行中。

是否有一个我应该在我没有使用的 flexbox 中使用的特殊属性？提前感谢您的帮助。

【参考方案1】：

好的，我把它舔了。所以对于你们中的任何一个谷歌人来说，我解决这个问题的方法是将 CSS 更改为：

.card-grid 
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;

  .data-card 
    /**
     * Height AUTO is important, because adding flex to the child makes it vertically 
     * stretch by default. So that means height: 100% won't work.
     */
    height: auto;
    //IE fallback
    display: inline-block;
    //Modern Browsers
    display: flex;
    display: -webkit-flex;

    ...

    /**
     * For some unknown reason, it still didn't work until I subracted 1% from
     * the width of each breakpoint I was using.
     */
    @media screen and (min-width: map_get($grid-breakpoints, 'lg')) 
      width: percentage((3 / 12)) - 1%;
    

    @media screen and (min-width: map_get($grid-breakpoints, 'md')) 
      width: percentage((4 / 12)) - 1%;
    

    @media screen and (max-width: map_get($grid-breakpoints, 'sm')) 
      width: percentage((6 / 12)) - 1%;
    
  

这个解决方案在 Chrome 中仍然可以很好地呈现，即使减去了真实宽度的 1%。我发现的一些事情是：

只需将 flex 放在父母身上（让孩子的身高 对齐）是不够的。我读了一个非常棒的演练 here。 在我知道我必须保持弹性后，我回到了第一方 父级和直接子级。直到我设置 孩子们的宽度到49%，它是固定的。我还是没有 知道为什么会这样，因为它与没有 box-sizing: content-box 而不是我使用的 box-sizing: border-box 一致。我有一个星形选择器将border-box 放在每个 元素，但也许我需要在孩子身上手动指定它？

我不需要我添加的所有额外供应商前缀，因为在 我的情况，我使用display: inline-block 作为后备时 flexbox 不可用。虽然，如果我愿意，我可以使用 下面。

@supports not (flex-wrap: wrap) 
  ...

然后在里面放一些代码。这是CSS Tricks 上的另一篇文章 讲了一些关于使用 flexbox 和 fallbacks 的内容。虽然，一个 与我的用例不同，它仍然很有帮助。 This was a good visual reference我想我会留下来。

希望所有这些信息对某人有所帮助。我知道它救了我的培根。

更新：将box-sizing: border-box 添加到子元素没有任何效果。看起来从宽度中减去1% 是可行的方法，除非有什么我不知道的，这是不可能的。

更新 2：由于朋友和this article 的建议，我稍微更改了代码，开始使用flex 属性，HTML 上的列类作为后备.以 mixin 的形式重新包含了供应商前缀。我还弄清楚了我必须减去百分比的原因是因为我在父级上方有一个网格容器，它有负边距和 clearfixes。删除后，下面的 CSS 就起作用了：

.card-grid 
  @include displayFlex;
  @include flexWrap(wrap);

  .data-card 
    /**
     * Height AUTO is important, because adding flex to the child makes it vertically 
     * stretch by default. So that means height: 100% won't work.
     */
    height: auto;
    //IE fallback
    display: inline-block;
    @include flexboxDisplay;
    @include flex(0 0 auto);

  

【讨论】：

我有同样的问题，但你的解决方案对我不起作用。您能否提供最终代码（不是解决方案），仅用于列对齐目的？

很抱歉，它对您不起作用。如果我理解正确，我没有使用 Flexbox 的 column-align 属性。我使用了典型的列浮动和宽度——由于需要支持旧的浏览器，并且不想编写更多的 polyfill——然后使用了一个带有 clearfix 的包装器。需要注意的重要一点是我的第一个 sn-p 中的媒体查询。对于我的第一个解决方案，为了让它们适合它们的列，我必须从真实宽度中减去 1% 并让 Flexbox 担心大小。