- display: flex;とは？
-
横幅と間隔を変更するプロパティ
- flex
- gap
-
まとめと補足
- flex-grow
- flex-shrink
- flex-basis
- row-gap
- column-gap
display: flex;とは
親要素にdisplay: flexを指定することで子要素を縦横に並べ、横幅、高さをフレキシブル（柔軟）に変更することができるCSSです。恐らくWebサイトを作成する際には必ずと言っていいくらい使用率が高いプロパティと値です。
横幅と間隔を変更するプロパティ
display: flex;を指定した際に子要素の横幅（flex）と間隔（gap）を変更できるプロパティが2つあります。
flex
flexプロパティはdisplay: flex;を指定した子要素に下記の様に値を指定することで子要素の横幅を変更することが可能です。
// flexの指定方法
flex: 伸長比 縮小比 ベースサイズ;
// 初期値
flex:
0 1 auto
;
flexの伸長比
flexの伸長比は子要素を並べた時にflexを指定された親要素の横幅にスペースがある際に柔軟に変更することが可能です。
使用例
下記の様に指定すると300pxのスペースを1:3:0の割合で子要素の幅を広げることができます。
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
<style>
.container {
width:
600px;
display:
flex;
}
.item1 {
display:
flex;
align-items:
center;
justify-content:
center;
height:
100px;
flex:
1 0 300px;
background-color:
#1976D2;
}
.item2 {
display:
flex;
align-items:
center;
justify-content:
center;
height:
100px;
flex:
3 0 300px;
background-color:
#FFC107;
}
.item3 {
display:
flex;
align-items:
center;
justify-content:
center;
height:
100px;
flex:
0 2 300px;
background-color:
#4CAF50;
}
</style>
※margin等が指定されているとmargin分を空いているスペースから引いて配分します。
計算式
（空いているスペース *（伸長比 / 子要素の伸長比の合計 ））+ 子要素の幅
.item1の場合
((300px * (1 / 4)) + 300px
=75px + 300px
=375px
flexの縮小比
flexの縮小比は伸長比とは逆で子要素の合計値の幅が親要素で指定している幅より大きかった場合に柔軟に子要素を縮小させることができます。
使用例
下記の様に指定すると500pxのネガティブスペースを1:0:2の割合で子要素の幅を広げることができます。
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
<style>
.container {
width:
400px;
display:
flex;
}
.item1 {
display:
flex;
align-items:
center;
justify-content:
center;
height:
100px;
flex:
0 1 300px;
background-color:
#1976D2;
}
.item2 {
display:
flex;
align-items:
center;
justify-content:
center;
height:
100px;
flex:
0 0 300px;
background-color:
#FFC107;
}
.item3 {
display:
flex;
align-items:
center;
justify-content:
center;
height:
100px;
flex:
0 2 300px;
background-color:
#4CAF50;
}
</style>
※margin等が指定されている場合はその分も合計したネガティブスペースで計算されます。
計算式
子要素の幅 - はみ出している幅（ネガティブスペース）* （縮小比 / 子要素の縮小比の合計）
.item1の場合
300px – (300px + 300px + 300px – 200px) * (1 / (1+2+2))
=300px – 700px * 0.2
=300px – 140px
=160px
gap
親要素にgapプロパティを使用することで子要素同士の間に余白を空けることができます。
使用例
下記の様に指定すると50pxの余白を子要素の上下に追加することができます。
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
</div>
<style>
.container {
width:
600px;
display:
flex;
flex-wrap:
wrap;
gap:
50px;
}
.item {
display:
flex;
align-items:
center;
justify-content:
center;
width:
200px;
height:
100px;
background-color:
#1976D2;
}
</style>
margin等で余白を空けてもよいのですが疑似要素等で不要な要素の値を上書きしないといけなかったりすることもあるので個人的には非常によく利用しているプロパティです。
まとめと補足
flexやgapでまとめて指定してもよいのですがそれぞれ個別に指定することも可能です。
flex-grow
伸長比のみを指定することができます。
flex-shrink
縮小比のみを指定することができます。
flex-basis
ベースサイズのみを指定することができます。
row-gap
子要素同士の上下の余白のみを指定することができます。
column-gap
子要素同士の左右の余白のみを指定することができます。
