これは、新しいフレキシブル ボックス レイアウト モデルに関する質問です。
Iのコンテナ内にdisplay: flex;
2 つのアイテムがあるとします。コンテナーの幅が十分に広い場合、両方のアイテムが水平に配置されます。そうでない場合、フレックスボックスのレイアウト メカニズムにより、アイテムが垂直に積み重ねられます。私が望むのは、アイテムが隣り合っているときに両方のアイテムの間に内側のマージンを持たせることですが、アイテムを積み重ねる必要がある場合は、このマージンを消したいと思います。
これは FlexBox モデルで可能ですか?
例として、最近のバージョンの Chrome でテストされた次のドキュメントを使用できます。
<!DOCTYPE html>
<title>Flex Box</title>
<style>
body {
font-size: 100px;
}
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
</style>
<div class="container">
<p>
One
</p>
<p>
Two
</p>
</div>
外側の div に十分な水平スペースがある場合、「One」と「Two」が隙間なく並べて表示されます。ブラウザ ウィンドウを縮小するとすぐに、両方が垂直に積み重なって表示されます。両方の段落が隣り合っている間、両方の段落を余白で区切っておきたいと思います。