均等配置したくない
Flexboxを使っていてこんな経験がございませんか？
『Flexboxを使っていてFlexアイテムに「flex:1」を指定したら意図せず均等配置になってしまった。』
私はグローバルナビゲーションにスタイルをあてていて、Flexアイテムを自然な感じで広げようとしたところ、均等配置になってしまい困ったことがあります。
意図せず均等配置になってしまう原因と対処方法について説明いたします。
対処方法は下記のとおりとなります。
対処方法：Flexアイテムに「flex:1 1 auto」または「flex: auto」を指定する
均等配置
Flexアイテムを均等配置する場合ですが、「flex:1」とショートハンドプロパティで指定すれば実現できます。
コード例は下記のとおりとなります。
<div class="wrapper">
<div class="item">トップ</div>
<div class="item">概要</div>
<div class="item">お問い合わせ</div>.wrapper {
display: flex;
width: 300px;
height: 50px;
}
.item {
flex: 1; /* ショートハンドプロパティで指定 */
}Flexコンテナーの幅が300pxに対してFlexアイテムが3つありますので、各Flexアイテムの幅は100pxとなります。
flex-growとflex-basis
Flexアイテムへの指定として、「flex-grow」「flex-shrink」「flex-basis」の３つがありますが、「flex-grow」と「flex-basis」について簡単に説明していきます。
まず「flex-grow」ですが初期値は０となっております。これを０以外の正値を設定しますと設定したFlexアイテムに対して余ったスペースが分配されます。
では余ったスペースはどう算出されるのでしょうか？
これは「Flexコンテナーの幅 – （Flexアイテムの幅の合計）」で算出されます。
Flexアイテムの幅は「flex-basis」で決定されます。初期値は「auto」ですので何も指定をしなければ、Flexアイテム本来の幅がFlexアイテムの幅となります。
均等配置となる原因
「flex-grow」「flex-shrink」「flex-basis」の初期値は以下のようになります。何も指定がない場合はこの初期値が適用されます。
初期値： 「flex-grow=0」 「flex-shrink=1」 「flex-basis=auto」
ショートハンドプロパティで「flex:1」と指定する場合ですが、「flex-shrink」「flex-basis」の２つを省略することができます。省略した場合は「flex-basis」の値が初期値から変わってしまいます。
ショートハンドプロパティで省略した時： 「flex-basis=0」
「flex-basis=0」となるとどうなるのでしょうか？
上記のコードで説明していきます。
まず「flex-basis=0」としますとFlexアイテムの幅は０となります。上記のコードではすべてのFlexアイテムが「flex-basis=0」となりますので、当然Flexアイテムの幅の合計も０となります。
従いまして余ったスペースは「Flexコンテナーの幅 – （Flexアイテムの幅の合計） ＝ Flexコンテナーの幅」となります。
この状態でflex-growを1と設定します。
上記のコードではすべてのFlexアイテムが「flex-grow=1」となりますので、余ったスペースが均等に配分されます。
つまり「余ったスペース=Flexコンテナーの幅」が均等に配分されることとなり、結果として均等配置になります。
まとめますと、均等配置となるのは「flex:1」とショートハンドプロパティで指定することで、「flex-basis=0」となっているのが原因ということになります。
原因：「flex:1」を指定することで「flex-basis=0」となっているので均等配置になる
対処方法
原因がつかめれば対処方法はそれほど難しくないかと思います。
対処方法：「flex-basis=auto」にしておいて「flex-grow=1」にする。
記述の仕方は下記の２通りが考えられます。
- ショートハンドプロパティを使わずに「flex-grow: 1」と記述する
- 「flex: 1 1 auto」または「flex: auto」と指定する
ショートハンドプロパティを使用せずに「flex-grow:1」とすれば、初期値が適用されますので「flex-basis=auto」を保持することができます。
しかしW3Cでショートハンドプロパティの使用が推奨されておりますので、２つ目の「flex: 1 1 auto」または「flex: auto」と指定するほうが良いかと思います。
（引用）
Authors are encouraged to control flexibility using the flex shorthand rather than with flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
引用元：W3C Candidate Recommendation (CSS Flexible Box Layout)
簡単に訳しますと「flexプロパティをきちんと定義するために、ショートハンドプロパティを推奨します」ということになります。
まとめ
「【CSS】Flexbox〜均等配置したくない〜」についてまとめてみました。
「指定を省略した場合は初期値は保持される」と思いこんでいましたので、「flex-basisの指定を省略すると初期値から値が変わってしまう」ということに中々気づくことができませんでした。
一度理解してしまえば「flex:auto」と指定するのは当然のように感じますが、意外と気づきにくいことかなと思い本記事を作成してみました。この記事をご覧いただいてご参考になれば幸いです。