フレックスボックスは、次のHTMLを考えると子供のマージン（余白崩壊）

を包ん無視ここフレックスボックスは、次のHTMLを考えると子供のマージン（余白崩壊）

.outer { 
    display: box; 
    box-orient: vertical; 

    height: 100px; 
    width: 100px; 

    background: red; 
    margin: 10px; 
} 

.inner { 
    height:  50px; 
    margin-top: 10px; 
    background: green; 
}

A and B

ですCodePen。

Aはそれを無視します余裕です<div>に包まれています。

QフレックスボックスモデルでA（マージン）のBの動作をどうすれば実現できますか？

注：最新のクローム/サファリ/ iOSの

はあなたの助けをありがとうございました：divのラッパーがターゲットに複数のレベルに深い

を行くことができます！

編集：

.outer { 
    display: flex; 
    flex-direction: column; 

    height: 100px; 
    width: 100px; 

    background: red; 
    margin: 10px; 
} 

.inner { 
    height:  50px; 
    margin-top: 10px; 
    background: green; 
}

CodePen

クローム： Chrome

サファリ： Safari

残念ながら、それは動作しません@JoséCaboのおかげで、私はこの思い付きました@cimmanonで言及されているようにSafariで、私はまだ彼が必要ですlp。

出典

2013-02-24 Stephan Bönnemann

あなたはボックスのAPIが廃止されていることをご存知でしたか？ display：flexを使う必要があります。代わりにapi。 –

あなたは結果を得たいですか？申し訳ありませんが、私はあなたを理解していません。 –

@JoséCabo*使用するべきプロパティは、どのブラウザを対象にしているかによって異なります。たとえば、Safariは古い仕様の1つに従います。 – cimmanon

最後に、（私の特定の問題のために）適切な解決策を考え出しました。

.outer { 
    display: flex; 
    flex-direction: column; 

    height: 100px; 
    width: 100px; 

    background: red; 
    margin: 10px; 
} 

.inner { 
    height: 50px; 
    margin-top: 10px; 
    background: green; 
    display: inline-block; 
    width: 100%; 
}

CodePen

私は崩壊マージンを無効にしwidth: 100%で失われた幅を補うために.innerにdisplay: inline-blockを使用しています。

すべてのクレジットは、右の「余白の崩壊」で私を指しているためcimmanonに行く方向

出典

2013-02-24 23:58:18

あなたはとにかくあなたの答えを受け入れるべきです:) – Alp

@Alp "あなたは2日間であなた自身の答えを受け入れることができます";） –

ああ、申し訳ありません。気にしないで：） – Alp

何を見ているが、実際にフレキシボックスとは何の関係もありませんが、どのような境界線の追加マージン崩壊

.outer div { 
    border: 1px solid; 
}

と呼ばれていますが潰れるのマージンを防いでいます。むしろ余白に頼るよりも、私は親コンテナに詰め物を置くことをお勧めします：

.outer { 
    padding-top: 10px; 
}

例：今すぐ

.wrapper { 
 
    background: #eef; 
 
    border: 1px solid darkgray; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: -1em; 
 
} 
 
    
 
.item { 
 
    flex-grow: 1; 
 
    margin: 1em; 
 
    border: 1px solid black; 
 
    padding: 1em; 
 
    min-width: 6em; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="wrapper"> 
 
    <div class='container'> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div>  
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

、あなたが必要とするあなたのプレフィックスのすべてをカバーするためにこのようなもの：

.outer { 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -moz-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    height: 100px; 
    width: 100px; 
    background: red; 
    margin: 10px; 
}

出典

2013-02-24 23:14:07 cimmanon

私は '.inner'で余白を使い続けることができる私の完璧な解決策を探しています。理想的には '.inner'だけを変更したいと思っています。しかし、*マージンの崩壊*事はsthです。私は上に構築することができます。どうもありがとうございました！ –

フレックスボックスは、次のHTMLを考えると子供のマージン（余白崩壊）

答えて

関連する問題