フレックスボックス間の不必要なマージン

私のウェブページには、フレックスボックスの隣にマージンが表示されるという問題があります。私はかなり単純なコードに問題を蒸留した。フレックスボックス間の不必要なマージン

HTMLコード

<html> 
    <head> 
     <link href="style.css" rel="stylesheet"> 
    </head> 
    <body> 

     <div class="container"> 
      <!-- When you remove this period, issue goes away --> 
     . 

      <div class="smallboxes"> 
       <div class="smallbox1"> 
       </div> 
       <div class="smallbox2"> 
       </div> 
      </div> 

      <div class="bigbox"> 
      </div> 

     </div> 

    </body> 
</html>

あなたがChromeでコードを実行すると、右クリックしてCSSコード

.container { 
display: flex; 
height: 100px; 
} 

.bigbox { 
flex: 2; 
background-color: #6e6e6e; 
display: flex; 
} 

.smallboxes { 
flex: 1; 
display: flex; 
flex-direction: column; 
} 

.smallbox1 { 
flex: 2; 
background-color: #6e6e6e; 
} 

.smallbox2 { 
flex: 1; 
}

、 "点検" をクリックし、水平モードでiPadはプロとして表示し、ビューを変更〜75％または125％である。 2つのボックスの間に白い線が表示されます。これは私のノート5にも現れています。 2つの灰色のボックスの間に線がないはずです。

コードで言及したように、期間を削除すると、問題はなくなります。

ありがとうございました！

P.S.私はまったく新しく、「このコードにコードを実行する」ボタンを挿入する方法を理解できないようです。私はこれのcodepenバージョンへのリンクも含めています。

http://codepen.io/jasonhoward64/pen/XMpYXJ

出典

2017-03-09 Jason Howard

編集：著者

のコメントに基づいて、新たな答え私はあなたのCodepenでプレーしてきたし、問題は、「フレックス：1」の使用です。 Flexは、「コンテナ」内に必要なスペースを作成します。 ".bigBox"にflex：2を指定すると、と "。smallBoxes" flex：1; ".container"を3つの部分に分割します。ここでは、bigBoxは2を占有します。コンテナ内にアイテムを追加するときは、フレックス値を指定せずに必要なスペースを計算します。スパンまたはdiv（または他の要素）の内側にドットを配置し、フレックス値を付けてみます。これはあなたの問題を解決します。

.container { 
 
    display: flex; 
 
    height: 100px; 
 
    background: red 
 
} 
 

 
.bigbox { 
 
    flex: 5; 
 
    background-color: #6e6e6e; 
 
    display: flex; 
 
} 
 

 
.testBox { 
 
    background: yellow; 
 
    flex: 1; 
 
} 
 

 
.smallboxes { 
 
    flex: 3; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.smallbox1 { 
 
    flex: 2; 
 
    background-color: #6e6e6e; \t 
 
} 
 

 
.smallbox2 { 
 
    flex: 1 
 
}

<html> 
 
    <head> 
 
    <link href="style.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
    <div class="container"> 
 
     <!-- When you remove this period, issue goes away --> \t <span class="testBox">test</span> 
 
     <div class="smallboxes"> 
 
     <div class="smallbox1"> 
 
     </div> 
 
     <div class="smallbox2"> 
 
     </div> 
 
     </div> 
 

 
     <div class="bigbox"> 
 
     </div> 
 

 
    </div> 
 

 
    </body> 
 
</html>

出典

2017-03-09 09:59:09

私は私のサムスン注5.それはまさにモードが示すのIpadでPC Chromeブラウザのように振る舞うでこれをテストしてみました。これはモバイルのみの問題です。 –

あなたのビューが100％に戻ったことに気づきました。横から縦に反転した後に75％または125％に変更すると、問題はまだ解決されています。 –

私の新しい答えを確認:) –

あなたは、コードの作品だが、あなたは体に0のマージンを追加するとき、それが再び壊れます。なぜなのかご存知ですか？

body { 
 
margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    height: 100px; 
 
    background: red 
 
} 
 

 
.bigbox { 
 
    flex: 5; 
 
    background-color: #6e6e6e; 
 
    display: flex; 
 
} 
 

 
.testBox { 
 
    background: yellow; 
 
    flex: 1; 
 
} 
 

 
.smallboxes { 
 
    flex: 3; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.smallbox1 { 
 
    flex: 2; 
 
    background-color: #6e6e6e; \t 
 
} 
 

 
.smallbox2 { 
 
    flex: 1 
 
}

<html> 
 
    <head> 
 
    <link href="style.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
    <div class="container"> 
 
     <!-- When you remove this period, issue goes away --> \t <span class="testBox">test</span> 
 
     <div class="smallboxes"> 
 
     <div class="smallbox1"> 
 
     </div> 
 
     <div class="smallbox2"> 
 
     </div> 
 
     </div> 
 

 
     <div class="bigbox"> 
 
     </div> 
 

 
    </div> 
 

 
    </body> 
 
</html>

出典

2017-03-11 20:20:04

フレックスボックス間の不必要なマージン

答えて

関連する問題