CSSのflex-basisとは？
flex-basisプロパティは、現行の最新CSSであるCSS3で追加されたプロパティです。
「display:flex」が設定されたフレックス要素で使われるプロパティーの一つで、flexコンテナ内の要素の幅を調整する際に使用します。
flex-basisプロパティを使用することで、フレックス要素の幅を均等にしたり、一部のフレックス要素だけ固定幅にするといったことも可能です。ただし、高さはflex-basisプロパティでは設定されず、heightプロパティなど別の高さ関係プロパティに依存します。
昔はあまり使われて来なかったフレックス要素ですが、レスポンシブ対応が必須になった現在は使用機体が大きく増えています。
widthプロパティとの違い
任意の幅を設定するプロパティといえばwidthプロパティがあります。
実際問題、ほとんどの場面ではflex-basisを使わずとも任意の幅をwidthプロパティでも設定できるでしょう。ですので、何故flex-basisプロパティが用意されているのか意味が分からない方がいるかと思います。
なぜwidthプロパティと酷似しているflex-basisプロパティが用意されているのかと言うと、flex-grow・flex-shrinkプロパティの設定値によっては、widthプロパティが正常に動作しないからです。
上記コードは、全てのフレックス要素が均等の幅になるようにwidthプロパティ・flex-basisプロパティを設定したHTMLですが、それぞれ幅指定の挙動が異なっていることが確認できるはずです。
widthプロパティに影響してしまうflex-growプロパティとflex-shrinkプロパティは、フレックス要素の縮み方やはみ出し方に影響するプロパティで、その影響を受けないように作られたのがフレックス要素用のflex-basisプロパティなのです。
そのため、フレックス要素の幅指定ではwidthプロパティではなくflex-basisプロパティを使用することで、意図しない幅になってしまう問題に遭遇しなくなります。
flex-basisプロパティの使い方
flex-basisプロパティは、widthプロパティを色んな使い方で使用しているのであれば難しいことはないでしょう。
解説時に使用する雛形サンプルコードも用意しているので、CSS3初心者の方でも大丈夫なはずです。
解説時に使用する雛形コード
ここからflex-basisプロパティの使い方について以下のプログラムをベースに解説していきます。
大前提としてflex-basisを使用する要素が「display:flex」の子要素である必要があるので、「display:flex」の仕様をうまく理解していない方は以下のコードをベースに試してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
ul {
display: flex;
padding:0;
background-color: #ccc;
list-style: none;
width:500px;
}
li {
padding:10px;
margin: 5px;
background-color: #31a9ee;
}
</style>
</head>
<body>
<ul>
<li>flex-basis１です。</li>
<li>flex-basis２です。</li>
<li>flex-basis３です。</li>
</ul>
</body>
</html>
フレックス要素の幅を均等にする
フレックス要素の幅を均等にしたいだけであればとても簡単です。
各フレックス要素に対して「flex-basis:〇〇%」を与えるだけです。パーセンテージの〇〇は要素数に合わせて修正してください。
フレックス要素の幅をすべて自動調整したい
この場合は「flex-basis:auto」を使用します。要素内のコンテンツに合わせて自動調整してくれる上に、勝手に親要素以上に大きくなってしまう心配もありませんので安心です。
これだけでフレックス要素の幅が要素内コンテンツに合わせて変動するようになるため、パーセンテージで指定する必要もありません。
ただし、「flex-shrink:0」を指定してしまうと、自動でフレックス要素が縮まらなくなってはみ出してしまうので注意しましょう。
また、jQueryなどで要素内コンテンツが変化しても、flex-basisプロパティによって自動的に幅が調整されるので、使いこなすことさえできればとても便利でしょう。
すべてのフレックス要素を異なる固定幅にする
この場合は、widthプロパティで幅を指定する時と同じように「flex-basis:〇〇px」と指定しましょう。
幅を指定する際の単位はpxだけでなく、emやptなどほかの単位でも問題ありません。すべて受け付けてくれます。
例のごとく、「flex-shrink:0」がない場合は親要素以上の幅にならず、最大幅が自動調整される(200pxと指定したのに実際は120pxになっているなど)ので注意しましょう。
一部のフレックス要素だけ固定幅にする
フレックス要素のすべてをパーセンテージで指定する、フレックス要素の全てを固定幅で指定するという使い方だけでなく、一部の要素だけで200pxなどの固定幅にして他はすべてauto(自動調整)にすることも可能です。
固定幅にしたい要素だけstyle属性で設定する方法もありですが、一度対象となるすべてのフレックス要素に「flex-basis:auto」を与え、「!important」など上書きできる方法を使って別クラスで「flex-basis:〇〇px」のように指定するのが賢いでしょう。
そうすれば、固定幅にしたい要素がある度にHTMLを修正するという手間が減るほか、修正も簡単ですのでおすすめです。
flex-basisプロパティで幅調整する際の注意点
flex-basisプロパティはフレックス要素の幅指定においてとても役立つプロパティですが、いくつか気を付けなければポイントがあります。
親要素以上の幅にはならない
俺様子の幅が500pxしかないのに、flex-basisプロパティを与える子要素の合計幅が500pxを超えても自動的に縮められるためはみ出しません。
意図的に親様子からはみ出したいという時もあるかもしれませんがめったにないでしょう。
何らかの目的があって親要素以上の幅を指定してはみ出させたい場合は、子要素に「flex-shrink:0」を与えて、幅が親要素を超えた際に縮む設定を解除してください。
横スクロールできるナビゲーションバーなどを作りたい場合は、この記述方法を応用すればうまくいくかもしれません。
一部のプロパティと競合する
ここまで何回か登場してきたプロパティ、
- flex-growプロパティ
- flex-shrinkプロパティ
この2つのプロパティはflex-basisプロパティの動作に大きく影響します。
flex-growプロパティは、flex-basisプロパティでパーセンテージで指定した際、親要素よりも合計幅が小さい時、自動で引き伸ばして親要素の幅に合わせるかどうかを指定するプロパティです。
flex-shrinkプロパティは、フレックス子要素の合計幅が親要素以上になったとき、自動で縮めてはみ出さないようにしてくれるかどうかを指定するプロパティです。
この2つを理解せずに子要素にこれらのflexプロパティを使ってしまうと、思うように幅を指定できない・プロパティの設定が効かない状態になってしまうので注意しましょう。
フレックス要素はとても便利ではありますが、widthプロパティなどの昔からある簡単なプロパティと比べると応用テクニックが必要なスキルですので、使いこなしたい場合は頑張ってみてください。