サイズを変えようとしたらflex-basisというものがでてきたんだけどwidthと何が違うの？
同じような結果ならwidthで良いよね？
でもこのプロパティを使う理由があるのでこれを今回は説明します！
今日のテーマ
- flex-basisの使い方がわかる
- flex-basisとwidthの違いがわかる
1.flex-basisの基本と役割
flex-basisプロパティはflex-box内での子要素の主軸方向の初期サイズを指定するプロパティです。
主軸方向が横なら幅、縦なら高さを指定します。
.container{
display: flex; /* 親要素にdisplay: flex;を指定 */
}
セレクター{
flex-basis: 値;
}1-1.主軸方向が横ver.
主軸が横方向(通常の場合)は以下のようにflex-basisを設定すると子要素に100px, 200px, 300pxの幅の基準値を指定したことになります。
.container{
display: flex; /* 親要素にdisplay: flex;を指定 */
}
.boxa{
flex-basis: 100px;
}
.boxb{
flex-basis: 200px;
}
.boxc{
flex-basis: 300px;
}See the Pen flex-basis by kbyt (@kbo58) on CodePen.
1-2.主軸方向が縦ver.
主軸が縦方向の場合は以下のように高さの基準を設定することになります。
.container{
display: flex; /* 親要素にdisplay: flex;を指定 */
max-width: 600px;
flex-direction: column; /* 主軸を縦方向に指定 */
}
.boxa{
flex-basis: 100px;
}
.boxb{
flex-basis: 200px;
}
.boxc{
flex-basis: 300px;
}See the Pen flex-basis-width by kbyt (@kbo58) on CodePen.
2.widthとの違い
じゃあwidthとは何が違うの？
サイズを指定する観点ではflex-basisとwidthは同じです。
では例を出しながら違うところを解説します
2-1.flex-box内でしか使えない
以下のように各要素にflex-basis、widthをそれぞれ指定しました。
.boxa{
width: 100px;
flex-basis: 10px;
}
.boxb{
flex-basis: 200px;
width: 150px;
}
.boxc{
flex-basis: 200px;
width: 300px;
}いずれの要素にもflex-basisは効いておらず、widthの値で幅が決まっていることがわかります。
2-2.flex-box内で使うとwidthよりも優先される
こちらも以下のように各要素にflex-basis、widthをそれぞれ指定しました。
.container{
display: flex;
width: 600px;
}
.boxa{
width: 100px;
flex-basis: 10px;
}
.boxb{
flex-basis: 200px;
width: 10px; /* あえてboxaと書く順番を逆にしています */
}
.boxc{
width: 300px;
flex-basis: 200px;
}flex-basisで指定した値で表示されているね
まとめると以下のようになります
| プロパティ | 適用される場面 | 説明 |
|---|---|---|
width | 通常 | 要素の横幅を固定・指定する |
flex-basis | Flexbox内の子要素 | Flexアイテムの基本サイズを決める（可変前提） |
3.なぜflex-basisを使うのか
でもどうしてわざわざflex-basisをつかうの？widthで良いんじゃないの？
flex-box内でわざわざflex-basisを使うのは、flex-grow や flex-shrinkといったプロパティと併せて使うことで以下のように柔軟なレイアウトを作れるからだよ。
See the Pen flex-basisまとめ by kbyt (@kbo58) on CodePen.
こちらの画面サイズを変えてみるとaaa,bbbのボックスは親要素に併せてサイズが変わりますが、cccのボックスの幅は500pxで固定されているのがわかります。
.container{
display: flex;
height: 200px;
}
.boxa{
flex-basis: 400px;
}
.boxb{
flex-basis: 300px;
flex-grow:1; /* 余白を伸ばす */
}
.boxc{
flex-basis: 500px; /* 基準を500pxに指定 */
flex-shrink:0; /* 画面を狭めても縮めない */
}このようにレスポンシブ対応した時の指定がとても楽にできるようになります。
まとめると、通常はwidthやheightで幅や高さを指定し、flex-box内ではflex-basisを使って幅や高さを指定するのが便利です。
4.まとめ
flex-basis
.container{
display: flex; /* 親要素にdisplay: flex;を指定 */
}
セレクター{
flex-basis: 値;
}- 使う際は親要素に
display: flex;をつける - flex-box内で幅や高さを指定する場合は
widthではなくflex-basisを使用すると楽
HTML/CSSをもっと学びたい方はこちらもオススメです！
コメント