フレックスアイテム間にマージンが設定されないのはなぜですか？

私は最近flexboxの学習を始めました。 .parentコンテナ内のdiv間にマージンを設定しようとしていますが、余白が表示されません。また、もし私が幅の値を.child divのいずれかに与えると、それはまだウィンドウ全体をカバーするように展開されます。どこが間違っていますか？フレックスアイテム間にマージンが設定されないのはなぜですか？

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.parent { 
 
\t display: flex; 
 
\t height: 100px; 
 
\t border: 2px solid black; 
 
\t justify-content: space-between; 
 
} 
 

 
.child { 
 
\t flex: 1; 
 
\t width: 32%; 
 
\t margin: auto; 
 
\t height: 100px; 
 
\t border: 2px solid blue; 
 
\t background: green; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Flexbox</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-09-29 Br34th7aking

あなたはサイトへのリンクを持っていますか？ – Heady

これは '.child' divに' flex：1; 'を指定しているために起こります。 –

マージンは私のために働く。幅については、 'max-width'を使うことができます – pol

あなたはdiv要素の空のスペースを埋めるためにサイズを変更することが原因となっている、flex: 1;を削除する必要があります。フレキシボックスで

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.parent { 
 
\t display: flex; 
 
\t height: 100px; 
 
\t border: 2px solid black; 
 
\t justify-content: space-between; 
 
} 
 

 
.child { 
 
\t width: 32%; 
 
\t margin: auto; 
 
\t height: 100px; 
 
\t border: 2px solid blue; 
 
\t background: green; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Flexbox</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-09-29 19:25:44

「余白」がないマージンを指定することで、あなたのコンテナの幅によって主に制御されるように予定されています。 flex-basisを使用してコンテナの幅を確認し、flex: 1を取り外します。それがコンテナの拡大を引き起こしています。それは "フレックス"ボックスだと思います。それは流動的であるため、マージンのようなものに静的な値を適用しようとすると、その目的を破ります。

ヒント：デバッグ時に背景色を使用し、境界線を使用しないでください。ボーダー効果の幅とトラブルを引き起こす可能性があります。乾杯。

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.parent { 
 
\t display: flex; 
 
\t height: 100px; 
 
\t justify-content: space-between; 
 
    background-color: blue; 
 
} 
 

 
.child { 
 
\t flex-basis: 20%; 
 
\t height: 100px; 
 
\t background: green; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Flexbox</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-09-29 19:26:40

ハンター・ターナーは、あなたがflex: 1を削除した場合、それは動作します言うように。このプロパティは、アイテムの長さを他のアイテムと比較して設定します。

MDN Docs

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.parent { 
 
\t display: flex; 
 
\t height: 100px; 
 
\t border: 2px solid black; 
 
\t justify-content: space-between; 
 
} 
 

 
.child { 
 
\t width: 32%; 
 
\t margin: auto; 
 
\t height: 100px; 
 
\t border: 2px solid blue; 
 
\t background: green; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Flexbox</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div class="parent"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-09-29 19:30:33 ZeroWorks

フレックスアイテム間にマージンが設定されないのはなぜですか？

答えて

関連する問題