Flexboxで枠間の余白を設定する - CSS
Flexboxで枠間の余白を設定する方法を紹介します。
概要
Flexboxで枠と枠の間に余白を開けるコードを紹介します。
Flexboxで枠と枠の間に余白を開ける場合は、margin プロパティを利用します。
実装例
コード
以下のCSS、HTMLを準備します。
.container {
display: flex;
}
.frameA {
border: 1px solid #e9006b;
flex:1;
margin: 0 1rem 0 1rem;
}
.frameB {
border: 1px solid #ff6a00;
flex: 1;
margin: 0 1rem 0 1rem;
}
.frameC {
border: 1px solid #d0b106;
flex: 1;
margin: 0 1rem 0 1rem;
}
.frameD {
border: 1px solid #4aae20;
flex: 1;
margin: 0 1rem 0 1rem;
}
.frameE {
border: 1px solid #01b9b3;
flex: 1;
margin: 0 1rem 0 1rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-column-margin.css" />
</head>
<body>
<div class="container">
<div class="frameA">1番目のコンテンツ<br />あいうえお<br />かきくけこ</div>
<div class="frameB">2番目のコンテンツ<br />αβγ<br /></div>
<div class="frameC">3番目のコンテンツ<br />ABCDE<br />FGHIJK</div>
<div class="frameD">4番目のコンテンツ<br />いろはに<br />ほへと</div>
<div class="frameE">5番目のコンテンツ<br />12345<br />67890</div>
</div>
</body>
</html>
解説
枠のクラスの設定部分の
margin プロパティにより枠同士の余白が開けられる設定になります。
下記のコードでは、top, bottom の値は0になっていますが、left, right のマージンが 1rem に設定されており、
枠と枠の間は2rem開く表示になります。
.frameA {
border: 1px solid #e9006b;
flex:1;
margin: 0 1rem 0 1rem;
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。枠と枠の間は2rem空いて表示されています。
ウィンドウ幅を広げます。枠の大きさは広がりますが、枠の間は2remの余白が空いた状態で表示されます。
枠のマージンの状態を確認します。開発者ツールで枠を選択します。左右に1remのマージン(オレンジ色の領域)がとられていることが確認できます。
一つとなりの枠のマー人の状態も確認します。こちらも、左右に1remのマージン(オレンジ色の領域)がとられていることが確認できます。
枠は横方向での段組みとなるため、マージンの相殺は発生せず、それぞれの枠が左右に1remのマージンを取るため、枠と枠の間は2rem余白がとられて
表示される動作となります。
補足 : マージンが無い場合
なお、CSSを下記に変更し、マージンを指定しない場合は下図の表示となります。
.container {
display: flex;
}
.frameA {
border: 1px solid #e9006b;
flex:1;
}
.frameB {
border: 1px solid #ff6a00;
flex: 1;
}
.frameC {
border: 1px solid #d0b106;
flex: 1;
}
.frameD {
border: 1px solid #4aae20;
flex: 1;
}
.frameE {
border: 1px solid #01b9b3;
flex: 1;
}
枠と枠の間の余白は無い表示となります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
