-
並び順と並べる方向を変更するプロパティ
- order
- flex-direction
- flex-wrap
-
まとめと補足
- flex-flow
並び順と並べる方向を変更するプロパティ
親要素にdisplay:flexを指定した時に並び順と方向を決めれるプロパティを紹介します。
横幅と余白の調整に関しては前回の記事をご覧ください。
Web制作では必須のdisplay:flexのflex,gapプロパティとは？
order
orderプロパティは子要素の並べる順番を変更したい時に使うと便利です。
値の数字が低い順に並んでいきます。
CSS
// 指定方法
order: 整数;
// 初期値
order:
0
;
使用例
HTML
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
<style>
div {
display:
flex;
align-items:
center;
justify-content:
center;
width:
200px;
height:
100px;
font-size:
2rem;
font-weight:
700;
color:
#fff;
}
.container {
width:
400px;
}
.item1 {
background-color:
#E33629;
order:
1;
}
.item2 {
background-color:
#F8BD00;
order:
2;
}
.item3 {
background-color:
#319F43;
order:
-1;
}
.item4 {
background-color:
#587DBD;
order:
0;
}
</style>
flex-direction
flex-directionは親要素に指定することで子要素の並べる方向を変更することができます。
CSS
// 指定方法
flex-direction:方向;
// 初期値
flex-direction:
row
;
row
rowは初期値となっていまして左から右に子要素を並べることができます。
column
columnは上から下に子要素を並べることができます。
row-reverse
row-reverseは文字通りrowの逆で右から左に子要素を並べることができます。
column-reverse
column-reverseはcolumnの逆で下から上に子要素を並べることができます。
flex-wrap
flex-wrapは子要素を折り返したい時に使用するプロパティです。
CSS
// 指定方法
flex-wrap:マルチライン;
// 初期値
flex-wrap:
no-wrap
;
no-wrap
no-wrapは文字通り子要素を折り返したくない時に使用します。
wrap
wrapは子要素を複数行で表示したい時に使用します。
wrap-reverse
wrap-reverseはwrapとは違い上方向に折り返したい時に使用します。
※私は使用したことがありません笑
まとめと補足
flex-directionとflex-wrapを組み合わせて使うことで横だけでなく縦の複数行などの表現もできますので用途に合わせて使用するといいかと思います。
また、flex-flowでflex-directionとflex-wrapをまとめて指定することもできます。
flex-flow
CSS
// 指定方法
flex-flow: 方向 マルチライン;
// 初期値
flex-wrap:
column wrap
;
