flexプロパティの説明
CSSのflexプロパティは、フレックス・アイテムの伸縮率や基準となる寸法を指定します。これにより、フレック・スアイテムをフレックス・コンテナの中にどのように収めるのか、伸長や収縮の量を決定します。
フレックスとは、CSSのレイアウト・モデルの一種であるフレックス・ボックス・モジュール（Flexible Box Module）の略称です。displayの値にflexを指定された要素が、その仕様に従って内容をレイアウトします。その機能の一部であるflexは、flex-grow、flex-shrink、flex-basisの値を一括で指定するショートハンド・プロパティです。
flexに指定できるのは、各プロパティを制御する1〜3つの値です。書く順序はflex-grow、flex-shrink、flex-basisでなければなりません。複数の値を指定する場合は、半角スペース区切りで記述します。
flexに指定できる値
auto- アイテムの寸法は
widthとheightプロパティによって目安を提示します。アイテムはコンテナのサイズに合わせて収縮し、空き領域がある場合は伸長して埋めようとします。この挙動はflex: 1 1 auto;の時と同じです。 initial- アイテムの寸法は
widthとheightプロパティによって目安を提示します。アイテムはコンテナのサイズに合わせて収縮しますが、空き領域があっても伸長して埋めようとはしません。この挙動はflex: 0 1 auto;の時と同じです。 none- アイテムの寸法は
widthとheightプロパティによって定まります。アイテムはコンテナのサイズに合わせて収縮したり、空き領域を埋めるために伸長することをしません。この挙動はflex: 0 0 auto;の時と同じです。 <'flex-grow'>flex-growプロパティの値を定義します。アイテムが伸長する倍率を指定します。コンテナに含まれるアイテムを並べた時に、余白が余る場合は各アイテムに指定されたflex-growの値に従って、自動的に幅を調整してコンテナの余白を埋めます。初期値は0です。<'flex-shrink'>flex-shrinkプロパティの値を定義します。アイテムが伸縮する倍率を指定します。コンテナに含まれるアイテムを並べた時に、基準値の幅に収まり切らない場合は各アイテムに指定されたflex-shrinkの値に従って、自動的に幅を調整してコンテナに収まるように縮みます。初期値は1です。<'flex-basis'>flex-basisプロパティの値を定義します。アイテムの幅の基準となる値を指定します。省略した場合は0となり、autoを指定した場合は、アイテムのコンテンツサイズに調整されます。初期値はautoです。
flexの使い方とサンプルコード
flexプロパティの構文は以下の通りです。
/* キーワード値 */
flex: auto;
flex: initial;
flex: none;
/* flex-grow */
flex: 1;
flex: 2;
/* flex-basis */
flex: 50px;
flex: 10rem;
flex: min-content;
/* flex-grow | flex-basis */
flex: 1 50px;
flex: 2 30rem;
/* flex-grow | flex-shrink */
flex: 1 3;
flex: 2 2;
/* flex-grow | flex-shrink | flex-basis */
flex: 1 1 100px;
flex: 2 2 20%;
/* グローバル値 */
flex: inherit;
flex: initial;
flex: revert;
flex: unset;
flexの実例
それでは実際にflexプロパティの書き方を見ていきましょう。以下の例では、幅100pxのアイテムを並べて、キーワードの値を変更した場合の挙動を確認できます。
resizeに対応しているブラウザであれば、コンテナのサイズを変更できます。コンテナの右下に表示されるハンドルを掴んで、横幅を伸縮させてみてください。
<div class="flex_box">
<div class="flex_item auto">auto</div>
<div class="flex_item auto">auto</div>
<div class="flex_item auto">auto</div>
</div>
<div class="flex_box">
<div class="flex_item initial">initial</div>
<div class="flex_item auto">auto</div>
<div class="flex_item auto">auto</div>
</div>
<div class="flex_box">
<div class="flex_item initial">initial</div>
<div class="flex_item auto">auto</div>
<div class="flex_item none">none</div>
</div>
<div class="flex_box">
<div class="flex_item initial">initial</div>
<div class="flex_item initial">initial</div>
<div class="flex_item none">none</div>
</div>
.flex_box {
overflow: auto;
display: flex;
gap: 1rem;
margin-top: 1rem;
padding: 1rem;
background: #eee;
resize: horizontal;
}
.flex_item {
width: 100px;
padding: .3rem;
background: #09f;
color: #fff;
}
.auto {
flex: auto;
}
.initial {
flex: initial;
}
.none {
flex: none;
}
ここでは以下の内容について理解を深めましょう。コンテナの幅を極端に狭めた時、アイテムはどのような挙動を示したでしょうか。今回はコンテナの主軸が横方向であるため、幅を対象に説明しますが、副軸を対象にする場合や主軸を垂直に変更した場合は、当然アイテムの高さが変動します。
autoは、空き領域があれば埋めようとし、コンテンツの幅まで縮まる。widthで指定したサイズはあくまで目安として機能する。initialは、widthで指定した幅を基準にするが、コンテナが狭まればコンテンツの幅まで縮まる。noneは、widthで指定した幅を守り、サイズ変更を行わない。
アイテムの最小幅について
アイテムの最小幅は内容の専有領域であるコンテンツボックスに制限されます。これを変更して最小幅を指定する場合は、min-widthを記述します。対象が高さの場合は、min-heightを指定してください。
先ほどのサンプルにmin-width: 0;を追加したアイテムの挙動です。コンテナの幅を狭めて、コンテンツに接触すると、そのまま貫通します。
キーワード以外の値を指定する
flexにキーワード以外の値を指定する場合、順序とその解釈は以下の通りになります。
- 1つの値
- 最初の値は字数でなければなりません。この値は
flex-growに該当します。この場合、flex-shrinkの値は1、flex-basisの値は0として解釈されます。 - 2つの値
- 2つ目の値は実数または幅を表す単位付きの数値でなければなりません。実数の場合は
flex-growとして扱われ、幅の場合はflex-basisとして扱われます。残された値は、値が1つの時と同様に解釈されます。 - 3つの値
- 3つ目の値は幅を表す単位付きの数値でなければなりません。2番目に幅を指定していた場合は、順番を繰り下げて3つめの値にします。