Flexbox の枠で一番右の枠を1つだけ右側に配置する - CSS
Flexbox の枠で一番右の枠を1つだけ右側に配置するコードを紹介します。
概要
Flexboxの枠で、一つの枠だけ右に配置する場合、Flexboxの枠にwidthプロパティを設定し、
margin-leftプロパティに
autoを設定します。
例
コード
.container {
display: flex;
}
.frameRight{
width:240px;
margin-left:auto;
border:1px solid #001dc6;
}
.frame1 {
width: 120px;
border: 1px solid #a10000;
}
.frame2 {
width: 120px;
border: 1px solid #ff6a00;
}
.frame3 {
width: 120px;
border: 1px solid #b7ae00;
}
.frame4 {
width: 120px;
border: 1px solid #2b9000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-column-right-align.css" />
</head>
<body>
<div class="container">
<div class="frame1">枠1<br />αβγ<br /></div>
<div class="frame2">枠2<br />ABCDE<br />FGHIJK</div>
<div class="frame3">枠3<br />αβγ<br /></div>
<div class="frame4">枠4<br />いろはに<br />ほへと</div>
<div class="frameRight">右側のコンテンツ<br />あいうえお<br />かきくけこ</div>
</div>
</body>
</html>
解説
外側の枠(containerクラス)に
display: flex; を指定します。
.container {
display: flex;
}
枠にwidthプロパティを指定します。
.frame1 {
width: 120px;
border: 1px solid #a10000;
}
一番右側の枠に widthプロパティを設定し枠の横幅を指定します。また、
margin-left:auto; を指定します。
.frameRight{
width:240px;
margin-left:auto;
border:1px solid #001dc6;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。一番右側の枠のみが右寄せで表示されていることが確認できます。
参考
widthプロパティを指定しない場合、下図の表示となります。
.container {
display: flex;
}
.frameRight{
margin-left:auto;
border:1px solid #001dc6;
}
.frame1 {
border: 1px solid #a10000;
}
.frame2 {
border: 1px solid #ff6a00;
}
.frame3 {
border: 1px solid #b7ae00;
}
.frame4 {
border: 1px solid #2b9000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-column-right-align2.css" />
</head>
<body>
<div class="container">
<div class="frame1">枠1<br />αβγ<br /></div>
<div class="frame2">枠2<br />ABCDE<br />FGHIJK</div>
<div class="frame3">枠3<br />αβγ<br /></div>
<div class="frame4">枠4<br />いろはに<br />ほへと</div>
<div class="frameRight">右側のコンテンツ<br />あいうえお<br />かきくけこ</div>
</div>
</body>
</html>
枠の幅がコンテンツの幅になります。一番右の枠のみ右寄せになります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
