web-dev-qa-db-ja.com

Flexboxは、Safariの最初の行の最後の列を折り返します

Safariおよび他のiOSベースのブラウザーで表示する場合、最初の行の最後の列は次の行に折り返されます。

サファリ：

enter image description here

クローム/その他：

enter image description here

コード：

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>
csstwitter-bootstrapcss3twitter-bootstrap-3flexbox
53
DN.

私の質問を更新するだけです

これは私が行くソリューションです。これは明らかにBootstrap4で修正されており、flexbox互換です。したがって、これはbootstrap3専用です。

.row.flexthis:after, .row.flexthis:before{
  display: none;
}
11
DN.

説明

これは、Safariが：beforeおよび：after擬似要素を実際の要素として扱うためです。例えば。 7つのアイテムを含むコンテナについて考えます。コンテナに：beforeと：afterがある場合、Safariは次のようにアイテムを配置します。

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

ソリューション

受け入れられた答えの代替として、HTMLを変更する代わりに、flexコンテナから：before＆：afterを削除します。あなたの場合：

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}
113
Taylan

私はこの問題がかなり古いことを知っていますが、私は今日この問題にぶつかり、それを修正するのに12時間以上無駄にしました。このうち約10時間は、12列のbootstrapグリッドでサファリが失敗することを認識するのに費やされましたが、他の問題ではありません。

私が行った修正はかなり簡単です。 Visual Composerのバージョンは次のとおりです。クラス名は他のフレームワークでは異なる場合があります。

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}
6
Gaurav

TwentyThree CMSにBootstrapを使用して簡単なグリッドを作成しようとするこの問題を発見し、Safariで同じバグを取得しました。とにかく、これは私のためにそれを解決しました：

.flex-container:before {
  display: inline;
}
3
user5373314

この種のバグを修正するためにクラスを追加したくなかったので、代わりに.rowクラス自体を修正できます。

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
}
3
Joeri Wauters

ブートストラップ4にはディスプレイに関する問題があります：ブロック; cssまたは.rowクラスのjavascriptから設定された場合のプロパティ。私はこのための解決策を考えましたクラスを次のように作成するだけです：

.display-block {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
}

そして、行を表示するときにこのクラスを適用します。

1
Farhan

追加することで修正できました

.row:before, .row:after {
display: flex !important;
}

明らかにこれは最もエレガントな解決策ではありませんが、それが修正されるまでしばらくの間はうまくいくかもしれません。

0
ashamun

私は同じ問題を抱えていたので、サファリのFlexボックスは、表示されている同じdivのfloatがクリアされることを好まないようです。

0
Cam Tullos
.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}
0
Enot

私もこの問題に数時間を費やしました。私の場合、flexboxを既存のプロジェクトに挿入して、rowのすべての要素の高さを同じにしました。 Safariを除くすべてのブラウザーで正しくレンダリングされましたが、上記の回答のいずれも私の問題を解決するようには見えませんでした。

Bootstrapclearfixハックがまだ使用されていることを発見するまで：（コードは laravel プロジェクトからのものですが、そうでない場合は汎用のBootstrap）

@foreach ($articles as $key => $article)
    @if ($key % 3 === 0)
        <div class="clearfix hidden-xs hidden-sm"></div>
    @endif
    @if ($key % 2 === 0)
        <div class="clearfix hidden-lg hidden-md"></div>
    @endif

    etc...
@endforeach

どうやら、Safari以外のブラウザは、flexboxが使用されているときに、何らかの方法で.clearfixを無視します。

したがって、列でflexboxを使用する場合、Bootstrapのclearfixを使用する必要はもうありません。

0
McVenco

これは、Safariのレンダリングのバグのようで、列がBootstrapコンテナーをオーバーフロー（ラップ）しているようです（Webkitの丸めエラーですか？）。 Bootstrapを使用しているため、flexを使用せずに目的の結果を達成できるはずです。

<div class="row">
    <div class="col-md-4 col-sm-6 text-center">
        <div class="product">
            <img src="img.jpg" alt="" class="img-responsive">
            <h3>Name</h3>
            <p>Description</p>
        </div>
    </div>
</div>
<style>
    .product {
        /* this is to automatically center and prevent overflow
           on very narrow viewports */
        display: inline-block;
        max-width: 100%;
    }
</style>

しかし！あなたの例を見るときの問題は、製品ブロックを正確に同じサイズに維持する必要があることです。そうしないと、グリッドはその形状を維持しません。考えられる解決策の1つは、.productに高さを固定し、メディアクエリを使用して調整することです。

Safariや他のブラウザーで動作するように作成した例を次に示します。 http://codepen.io/anon/pen/PZbNMX さらに、スタイルルールを使用して、特定の範囲内で画像または説明テキストを保持できます。物事を維持しやすくするためのサイズ。

別の可能な解決策は、スクリプトまたはjQueryプラグインを使用して、より動的な均一なサイジングを可能にすることですが、私はそのようなものに精通していません。

Safariを使用してflexとBootstrapを組み合わせようとしたときに同じ問題が発生したため、これが役立つことを願っています。

0
Basil Mohabir