悩んでる人CSSのflex:1って何だろう？
悩んでる人どんな時に使えばいいんのだろうか？
おしけんdisplay:flexは知ってるけど、flex:1は知らないという人は少なくないです
おしけんdisplay:flexを使うなら、flex:1はかなり便利ですよ✨
本記事では、CSSのflex:1の使い方を具体例を含めて解説します。
flex:1の使い方を知りたい方は、ぜひ参考にしてみてください。
- 会社員3年、フリーランス4年目
- システムエンジニア兼ブロガー
- 保険系、物流系、鉄道系、小売系などのシステム開発に従事
【CSS】flex:1とは
flex:1とは、「 flex：1 1 0%; 」 を省略指定したものです。
つまり、flexプロパティへの指定方法の一つですね！
悩んでる人display:flexと何が違うのかよく分からない
flexプロパティは、display:flexで指定したflexアイテム要素に対し、幅や高さの伸縮率を設定できるCSSプロパティです。
大まかに、以下のように整理すると理解しやすいでしょう！
- displayプロパティ：
-
レイアウト、表示の種類などを決める。 (例)display：block、inline-block、flexなど
- flexプロパティ：
-
display:でflex指定したブロック内要素の縦横幅を決める
悩んでる人伸縮率ってなんだろう？
伸縮率とは、Webブラウザの端をドラックしながら広げたり狭めたりする時に、HTML要素サイズをどのくらい伸ばしたり縮めたりするのかの比率のことです。
【CSS】flex:1の具体的な指定内容について
「flex：1」を指定することで、HTML要素をWebページの表示エリアに応じて伸縮するようになります。
「flex：1」とは「flex：1 1 0%」のことですが、以下の3つのプロパティを一括指定しています。
それぞれ、詳しく説明していきます。
flex-growプロパティの指定：１
flex:1では、flex-grow:1が指定されています。
悩んでる人そもそもflex-growって何だろう？
flex-growは、親要素のflexコンテナ内で利用可能な余白スペースを、子要素のflexアイテムに割り当てる比率を指定するプロパティです。
おしけん言葉だけだと難しいので、実際のコードで紹介しますね！
下記のコードを例に、flex-growの指定有無によって何が違ってくるのかを見ていきます。
<div class="parents-item">
<div class="child-item">サンプル①</div>
<div class="child-item">サンプル②のアイテムです</div>
</div>.parents-item{
display:flex;
background-color:lightpink;
}
.child-item{
background-color:skyblue;
margin:10px;
padding: 50px 0;
}上記はflex-grow未指定のコードですが、以下のとおり右側に余白スペースができます。
おしけん実は、flex-grow未指定の時は、flex-grow:0がデフォルトで適用されるんです！
flex-grow:0は、余白スペースがあっても要素を伸ばさないようにします。
次に、以下のようにflex-growを追加するとどうでしょうか！
<div class="parents-item">
<div style="flex-grow:1;" class="child-item">サンプル①</div>
<div style="flex-grow:2;" class="child-item">サンプル②のアイテムです</div>
</div>以下のとおり、flex-growを指定することで右側のスペースがなくなります。
これは、各flexアイテムに「flex-grow:1;」と「flex-grow:2;」が指定されることで、右側の空きスペースが3分割され、分割スペースが1対2の割合で分配されるから。
また、上記の例では、各flexアイテムにflex-growを指定しましたが、1つのflexアイテムのみ「flex-grow:1;」を指定した場合は、空きスペースの全てがそのflexアイテムに分配されます。
まとめると以下のようになります。
- flex-growが未指定の場合はデフォルトで0が自動指定される
- flex-growに値が指定されたflexアイテムのみ空きスペースが分配される
- flex-growで指定された値に応じた比率で空きスペースが割り当てられる
flex-shrinkプロパティの指定：１
flex:1では、flex-shrink:1が指定されています。
悩んでる人そもそもflex-shrinkって何だろう？
flex-shrinkは、親要素のflexコンテナからはみ出した分を元に、子要素のflexアイテムを縮小する比率を指定するプロパティです。
おしけん言葉だけだと難しいので、実際のコードで紹介しますね！
下記のコードを例に、flex-shrinkの指定値によって何が違ってくるのかを見ていきます。
<div class="parents-item">
<div class="child-item">サンプル①</div>
<div class="child-item">サンプル②のアイテムです</div>
</div>.parents-item{
display:flex;
background-color:lightpink;
width:500px;
}
.child-item{
background-color:skyblue;
margin:10px;
padding: 50px 0;
width:300px;
flex-shrink:0;
}上記はflex-shrink:0を指定したコードですが、以下のとおりflexアイテムがはみ出した状態になります。
次に、以下のような値でflex-shrinkを指定するとどうなるでしょうか？
<div class="parents-item">
<div style="flex-shrink:4;" class="child-item">サンプル①</div>
<div style="flex-shrink:1;" class="child-item">サンプル②のアイテムです</div>
</div>以下のとおり、flex-shrinkを指定することで、flexアイテムがはみ出さなくなります。
これは、各flexアイテムに「flex-shrink:1;」と「flex-shrink:4;」が指定されることで、はみ出した部分が5分割され、それぞれのflexアイテムを1対4の割合で縮めるから。
また、上記の例では、各flexアイテムにflex-shrinkを指定しましたが、1つのflexアイテムのみ「flex-shrink:1;」を指定した場合は、はみ出した分をそのflexアイテムを縮めることではみ出さないように調整します。
ちなみに、flex-shrinkを指定しない場合は、flex-shrink:1をデフォルト値とするため、自動的にflexコンテナ内に収まるように調整されます。
まとめると以下のようになります。
- flex-shrinkが未指定の場合はデフォルト値として1が自動指定される
- flex-shrink:0を指定すると要素を縮小せずにオリジナルサイズを維持する
- flex-shrinkは指定された値に応じた比率で各flexアイテムを縮める
flex-basisプロパティの指定：０％
flex:1では、flex-basis:0%が指定されています。
悩んでる人そもそもflex-basisって何だろう？
flex-basisは、flexアイテムの初期サイズを指定するプロパティです。widthプロパティやheightプロパティと似ています。
おしけん言葉だけだと難しいので、実際のコードで紹介しますね！
下記のコードを例に、flex-basisの指定値によって何が違ってくるのかを見ていきます。
<div class="parents-item">
<div style="flex-basis:150px;" class="child-item">AAAAAAAAA</div>
<div style="flex-basis:300px;" class="child-item">BBBBBCCCCCDDDDDEEEEE</div>
</div>.parents-item{
display:flex;
background-color:lightpink;
width:600px;
}
.child-item{
background-color:skyblue;
margin:10px;
padding:50px 0;
flex-grow:0;
flex-shrink:0;
width:300px;
}上記はflex-basisに具体的な値を指定したコードですが、以下のとおりflexアイテムは、flex-basisで指定した横幅になっています。
これは、flex-basisの値として150pxと300pxを指定しているから。
また、flex-basisを使用する上で、以下2つのポイントがあります。
- widthの指定値でなく、flex-basisの指定値が優先されていること
- flex-growとflex-shrinkの値を0に指定していること
flex-growとflex-shrinkの指定値を0にしている理由は、flexアイテムを伸びたり縮んだりしないようにするためです。
flexアイテムが伸びたり縮んだりできてしまうと、flex-basisを指定しても意図したサイズにならないでしょう。
次に、以下のようにflex-basis:0%を指定するとどうなるでしょうか？
<div class="parents-item">
<div style="flex-basis:0%;" class="child-item">AAAAAAAAA</div>
<div style="flex-basis:300px;" class="child-item">BBBBBCCCCCDDDDDEEEEE</div>
</div>.parents-item{
display:flex;
background-color:lightpink;
width:600px;
}
.child-item{
background-color:skyblue;
margin:10px;
padding:50px 0;
flex-grow:0;
flex-shrink:0;
width:300px;
}以下のとおり、flex-basis:0%を指定したflexアイテムは、「AAAAAAAAA」の文字の長さに合わせたサイズになります。
これは、flex-basis:0%とすることで、初期サイズ0とみなされ、flexアイテム内に文字などが入っていれば、可能な範囲で最小となるから。
ちなみに、flex-basisを指定しない場合は、flex-basis:autoをデフォルト値とするため、widthプロパティやheightプロパティの指定が優先されるようになります。
まとめると以下のようになります。
- flex-basisが未指定の場合は、flex-basis:autoが自動指定される
- flex-basis:0%を指定すると初期サイズ0とみなされ、可能な範囲で最小となる
- flex-basisを指定すると、flexアイテムは指定値に応じて初期サイズが決まる
【CSS】flex:1の使い方
flex:1の使い方としては、以下の2つのポイントがあります。
それぞれ、詳しく説明していきます。
ポイント１：親要素にはdisplay:flexを指定する
flex:1を指定する要素の親要素に対して、display:flexを追加しましょう。
さらに、flex-directionプロパティの指定もしておくと良いです！
flex-directionプロパティを指定することで、縦か横のどちらの方向に並べていくのか指定できます。
ポイント２：子要素にはflex:1を指定する
display:flexを指定している要素の子要素に対して、flex:1を追加しましょう。
flex:1を利用するには、flexboxレイアウトであることが前提となります。
flex:1は、全ての子要素に適用する必要はなく、1つ以上の要素に指定すれば大丈夫です。
【CSS】flex:1の使用例
flex:1は、webブラウザの表示エリアを広げたり狭めたりする時のwebページ幅などを自動調整してくれるCSSプロパティです。
flex:1の使用例として、以下の3つを挙げてみました。
それぞれ、詳しく説明していきます。
例1：Webページのフッター固定
flex:1を活用すると、以下のようにwebページのフッター固定を実現することができます。
webページのコンテンツが少なすぎると、以下のような状態になってしまいます。
このように、ページコンテンツが少ない状態であってもフッターを最下部に固定するために、flex:1を使用する方法があります。
以下のコードを参考にしてみてください。
<body>
<div class="wrapper">
<div class="header">ヘッダー部分です</div>
<div class="contents">コンテンツ部分です</div>
<div class="footer">フッター部分です</div>
</div>
</body>*{
padding:0%;
margin:0;
}
html,body, .wrapper{
height:100%;
}
.wrapper{
display:flex;
flex-direction:column;
background-color:lightpink;
}
.header{
height:100px;
background-color:lightgreen;
flex-shrink:0;
}
.contents{
background-color:lightgray;
flex:1;
}
.footer{
height:100px;
background-color:orange;
flex-shrink:0;
}上記のコードでwebページを表示させると、フッターが最下部に固定された状態になります。
また、ヘッダーとフッターにflex-shrink:0を追加すると、コンテンツの量が増えてもヘッダーとフッターの高さは圧縮されないようになります。
例2：タイトル幅固定で詳細部分を可変幅の一覧表
flex:1を活用すると、以下のように送信者と件名部分を固定で詳細部分を可変幅にした一覧表を作ることができます。
以下のコードを参考にしてみてください。
<body>
<div class="wrapper">
<div class="list-header">
<div class="list-title">送信者</div>
<div class="list-title">件名</div>
<div class="list-content">メール本文</div>
</div>
<div class="list-item">
<div class="list-title">送信者</div>
<div class="list-title">件名1</div>
<div class="list-content">
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>
</div>
<div class="list-item">
<div class="list-title">送信者</div>
<div class="list-title">件名2</div>
<div class="list-content">サンプルサンプル</div>
</div>
<div class="list-item">
<div class="list-title">送信者</div>
<div class="list-title">件名3</div>
<div class="list-content">サンプルサンプルサンプルサンプル</div>
</div>
</div>
</body>.wrapper{
margin-top:100px;
}
.list-header,.list-item{
display:flex;
justify-content:space-between;
padding:2px;
}
.list-header{
background-color:lightpink;
border:1px solid;
}
.list-item{
border-bottom:1px solid gray;
}
.list-title{
flex-shrink:0;
width:100px;
}
.list-content{
flex:1;
margin-left:10px;
}このようにflex:1は、可変幅であってもタイトル幅だけ固定した一覧表を作りたい場合に便利です。
例3：選択エリアの拡大アニメーション
flex:1を活用すると、以下のように選択したエリアを拡大するようなアニメーションを実現することができます。
以下のコードを参考にしてみてください。
<body>
<div class="wrapper">
<div class="selectItem" style="background-color:red;"></div>
<div class="selectItem" style="background-color:skyblue;"></div>
<div class="selectItem" style="background-color:black;"></div>
<div class="selectItem" style="background-color:yellow;"></div>
<div class="selectItem" style="background-color:pink;"></div>
</div>
</body>.wrapper{
margin-top:100px;
width:500px;
display:flex;
}
.selectItem{
flex:1;
transition:flex 0.3s ease-out;
}
.selectItem:hover{
flex:4;
}ホバー時に、flexプロパティの指定を一時的に、1から4に変化させることでflexアイテムの伸び比率を変えています。
まとめ
本記事では、CSSのflex:1の使い方について解説しました！
flex:1は、「 flex-grow:1、flex-shrink:1、flex-basis:0 」を一括指定するのと同じです。
最後に今回のおさらいをしておきましょう。
CSSプロパティは、Webデザインにおいて重要な要素ですが、全てを覚えるのは大変。
これを機会に、知識が少しでも増えていくことを応援しています！
