CSSの表示フレックス私は私のセクションでは、このように見えるようにするためにフレキシボックスのプロパティを使用

Question

クロームとSafariで正常に動作していない：それはChromeで正常に動作しますが、私は、Firefoxをチェックすると、私はいくつかの違いに気づいた

とサファリ。

これはクロムがどのように見えるかです：

しかし、Firefoxの上で、私は赤の信号としたいように1％のマージンに適用する管理していないのです示しています

そして、サファリでは、箱はすべて次々と続いています：

これはWordPressサイトであり、まだライブしていません。

<section id="services"> 

     // here goes the title of the container 

     <div class="main-container col-lg"> 

       // here go all the box 

     <div class="services-container">  

       // this one of the boxes    
     </div> 
     </div> 
    </section> 

とCSS：

#services { 
    background-image: url("img/Services-background.jpg"); 
    background-color: red; 
} 
.col-lg { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin: initial; 
    max-width: 100%; 
} 
.services-container { 
    color: #d6d6d6; 
    margin: 1%; 
    max-width: 100%; 
    width: 30%; 
} 

どのように私はすべてのブラウザでこの作業を行うことができますが、ここに私のHTML構造はありますか？

Answer 1

私は強くあなたがフレキシボックスを使用していないお勧めしますが、代わりに浮きます。あなたのCSSは次のようになります。すべてのFlexプロパティを削除します ：

#services{ 
    background-image: url(img/Services-background.jpg); 
    overflow: auto; 
} 
.services-container { 
    color: #d6d6d6; 
    width: 30%; 
    float: left; 
    margin: 1%; 
} 

は、その後、あなたは、スタイリングの残りの部分を追加することができます。それはすべてのブラウザで動作します。

Answer 2

フレックスがすべてのブラウザで同じように機能するようにするには、接頭辞を使用することをお勧めします。

あなたに別のフレックスボックスに使用可能なブラウザの接頭辞（や一般的なブラウザのサポートの通知）を示す

Here's the chart from MDN

Answer 3

display: flex; 
-webkit-display: flex; 
-moz-display: flex; 
-ms--display: flex;