Flexbox の枠の並びの方向を変更するコードを紹介します。
例１ (flex-direction: row; の場合)
コード
下記のコードを記述します。
.container-row {
display: flex;
flex-direction: row;
}
.frame1 {
border: 1px solid #ff0000;
flex: 2;
}
.frame2 {
border: 1px solid #ff6d00;
flex: 3;
}
.frame3 {
border: 1px solid #ff9c00;
flex: 4;
}
.frame4 {
border: 1px solid #ffd300;
flex: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-direction.css" />
</head>
<body>
<div class="container-row-reverse">
<div class="frame1">1番目のコンテンツ</div>
<div class="frame2">2番目のコンテンツ</div>
<div class="frame3">3番目のコンテンツ</div>
<div class="frame4">4番目のコンテンツ</div>
</div>
</body>
</html>
解説
コンテンツの枠を包含する枠
display: flex; を指定した枠で
flex-direction: row; を指定すると内部に含まれる枠は左から順番に横方向に並びます。flex-direction プロパティを指定しなかった場合も
flex-direction: row; を指定した場合と同じ動作になります。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。コンテンツの枠が左から順番に横方向に並んでいることが確認できます。
例2 (flex-direction: row-reverse; の場合)
.container-row-reverse {
display: flex;
flex-direction:row-reverse;
}
.frame1 {
border: 1px solid #ff0000;
flex: 2;
}
.frame2 {
border: 1px solid #ff6d00;
flex: 3;
}
.frame3 {
border: 1px solid #ff9c00;
flex: 4;
}
.frame4 {
border: 1px solid #ffd300;
flex: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-direction.css" />
</head>
<body>
<div class="container-row-reverse">
<div class="frame1">1番目のコンテンツ</div>
<div class="frame2">2番目のコンテンツ</div>
<div class="frame3">3番目のコンテンツ</div>
<div class="frame4">4番目のコンテンツ</div>
</div>
</body>
</html>
解説
コンテンツの枠を包含する枠
display: flex; を指定した枠で
flex-direction: row-reverse; を指定すると内部に含まれる枠は右から順番に横方向に並びます。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。コンテンツの枠が右から横方向に並んでいることが確認できます。
例3 (flex-direction: column; の場合)
.container-column {
display: flex;
flex-direction: column;
}
.frame1 {
border: 1px solid #ff0000;
flex: 2;
}
.frame2 {
border: 1px solid #ff6d00;
flex: 3;
}
.frame3 {
border: 1px solid #ff9c00;
flex: 4;
}
.frame4 {
border: 1px solid #ffd300;
flex: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-direction.css" />
</head>
<body>
<div class="container-column">
<div class="frame1">1番目のコンテンツ</div>
<div class="frame2">2番目のコンテンツ</div>
<div class="frame3">3番目のコンテンツ</div>
<div class="frame4">4番目のコンテンツ</div>
</div>
</body>
</html>
解説
コンテンツの枠を包含する枠
display: flex; を指定した枠で
flex-direction: column; を指定すると内部に含まれる枠は上から下に向かって順番に縦方向に並びます。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。1番目の枠から上から順番に縦方向に並ぶことが確認できます。
例4 (flex-direction: column-reverse; の場合)
.container-column-reverse {
display: flex;
flex-direction: column-reverse;
}
.frame1 {
border: 1px solid #ff0000;
flex: 2;
}
.frame2 {
border: 1px solid #ff6d00;
flex: 3;
}
.frame3 {
border: 1px solid #ff9c00;
flex: 4;
}
.frame4 {
border: 1px solid #ffd300;
flex: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-direction.css" />
</head>
<body>
<div class="container-column-reverse">
<div class="frame1">1番目のコンテンツ</div>
<div class="frame2">2番目のコンテンツ</div>
<div class="frame3">3番目のコンテンツ</div>
<div class="frame4">4番目のコンテンツ</div>
</div>
</body>
</html>
解説
コンテンツの枠を包含する枠
display: flex; を指定した枠で
flex-direction: column-reverse; を指定すると内部に含まれる枠は下から上に向かって順番に縦方向に並びます。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。下から上に向かって縦方向にコンテンツの枠が並ぶことが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2018-08-24
作成日: 2018-08-24
