CSSにおけるフレックス要素の伸長
例えば、横に並んだ2つのフレックスブロックがあるとします。
これらのブロックの幅は
100px、親要素の幅は300pxです：
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
ご覧の通り、要素の合計幅は親要素の幅よりも小さいため、 右側に余白が残っています。
必要に応じて、この余白を要素間で比例的に分割することができます。
これは、フレックス要素に設定するプロパティflex-growで行います。
このプロパティの値は、単位のない数値です。
実際にこのプロパティがどのように機能するか見てみましょう。
例
現在、2つのフレックスブロックの幅は
100pxです。要素の合計幅は
200px、親要素の幅は300pxです。
つまり、100pxの余白が残っています。
要素にflex-growが設定されていない場合、
この余白はそのまま表示されます。
設定されている場合、要素の実際の幅は指定された幅よりも大きくなります。
要素は余白を互いに比例的に分割し、自分の幅に加えます。
例として、最初の要素のflex-growを
1、2番目の要素を3とします。
それぞれの要素が余白のどの部分を得るかを計算してみましょう。
まず、すべての要素のflex-growの合計単位を求める必要があります。
最初の要素は1、2番目の要素は3です。
つまり、合計は4です。
次に、100pxの余白を4で割ると、
flex-grow1単位あたり25pxとなります。
結果として、最初の要素には1単位分、
つまり25pxが加わり、
2番目の要素には3単位分、
つまり75pxが加わります。
最初の要素の幅は125px、
2番目の要素の幅は175pxになります：
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 3;
}
:
例
次に、親要素の幅が400px、
最初の要素の幅が200px、
2番目の要素の幅が100pxだとします。
結果として、余白は再び100pxになります。
すべての要素のflex-growを1に設定してみましょう。
合計は2になります。
つまり、100pxの余白を2で割る必要があります。
すると、伸長率1単位あたり50pxとなります。
すべての要素のflex-growの値が同じなので、
すべての要素に同じ値50pxが加わります。
つまり、最初の要素は250pxに、
2番目の要素は150pxになります：
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
:
例
再び、親要素の幅が400px、
最初の要素の幅が200px、
2番目の要素の幅が100pxだとします。
今度は、最初の要素のflex-growを3に、
2番目の要素を1に設定してみましょう。
伸長率の合計は4になります。
すると、伸長率1単位あたり100px / 4 = 25px
最初の要素には75pxが加わり、
275pxになります。
2番目の要素には25pxが加わり、
125pxになります：
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
:
実践問題
以下のすべての問題では、
幅とflex-growを持つフレックス要素を含むコードが示されます。
提示されたコードに基づいて、各要素が持つサイズを計算してください。
その後、コードを実行し、実際の要素の幅を測定して計算結果を確認してください。
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}
