CSS

flex-basisプロパティの概要

flexアイテムにflex-basisプロパティを指定することで、そのflexアイテムのコンテンツ横幅や高さを定義することができます。

書式

flex-basis: 値;

初期値

auto（そのままコンテンツ分の幅になる）

値の指定

数値と単位

数値とパーセント

継承

しない

指定先

flexアイテム

flex-basisを指定する

メニューリストにdisplay: flex;を適用してメニューそれぞれが横並びになるパターンで説明していきます。HTMLは次のように書きます。

<ul class="flex_container">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

li要素にflex-basisプロパティを適用します。値は「100px」にします。わかりやすくする為に余白や枠線も指定しています。

.flex_container {
    display: flex;
    background-color: #eee;
    list-style-type: none;
}
.flex_container li {
    flex-basis: 100px;
    padding: 5px;
    border: solid 1px #888;
    background-color: #ffb;
}

表示結果は次のようになります。

各メニューのコンテンツ幅が100pxになりました。ただ今回の例では、padding: 5px;とborder: solid 1px #888;も同時に指定しています。余白と枠線もつけたわけです。それによって、li要素の横幅はというと112pxになりました。

flex-basisはあくまでコンテンツ幅を定義するプロパティです。なので今回の li要素の横幅は、下の図のように、flex-basis: 100px;よりも余白と枠線の分プラスされた幅になります。

<ul class="flex_container">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

.flex_container {
    display: flex;
    中略
}
.flex_container li {
    flex-basis: 100px;
    box-sizing: border-box;
    padding: 5px;
    border: solid 1px #888;
    中略
}

<ul class="flex_container">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

.flex_container {
    display: flex;
    中略
}
.flex_container li {
    box-sizing: border-box;
    padding: 5px;
    border: solid 1px #888;
    中略
}
.flex_container li:nth-of-type(1) {
    flex-basis: 20%;
}
.flex_container li:nth-of-type(2) {
    flex-basis: 30%;
}
.flex_container li:nth-of-type(3) {
    flex-basis: 50%;
}

flex-basisとwidthの違い

要素の幅を指定するプロパティにwidthがあります。flex-basisとwidth、双方ともコンテンツの幅を定義するプロパティですし、box-sizing: border-box;を指定した場合の挙動も同じです。値の指定方法にも違いはありません。ではどこが違うのでしょうか。

flex-basisプロパティでは、flexアイテムの幅と高さ、どちらの指定も可能ですが、widthプロパティは幅を定義するものです。同様に高さを定義したい場合は heightプロパティを使うことになります。

<ul class="flex_container">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

.flex_container {
    display: flex;
    中略
}
.flex_container li {
    flex-basis: 100px;
    中略
}
.flex_container li {
    width: 200px;
}

横幅と高さのどちらを定義するかはflex-directionの値による

flex-basisプロパティの効果は、flexコンテナの主軸の方向（つまりflexアイテムが並ぶ方向）に関係します。flexコンテナの主軸の方向は、flex-directionプロパティで定義します。flex-directionの値が「row」ならば左から右への水平軸とし、「column」ならば上から下への縦軸とします。

よって、flexコンテナに flex-direction: column; を指定すると、flex-basisの値はflexアイテムの高さを定義することになります。

この記事でのこれまでの例ではflex-directionは指定しませんでした。flex-directionプロパティの初期値が「row」なので、主軸がデフォルトで水平方向となり、結果、flex-basisの値は幅を定義したものになっていたわけです。

flex-basisで高さを指定する

flexコンテナにflex-direction: column;を指定して主軸を縦方向とし、flex-basisで高さを指定します。

<ul class="flex_container">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
</ul>

.flex_container {
    display: flex;
    flex-direction: column;
    中略
}
.flex_container li {
    flex-basis: 70px;
    中略
}

この場合は次のように表示されます。

flex-direction: column;の指定でflexコンテナの主軸が縦方向となり、flexアイテムは縦に並びます。よって必然的に、今回のflex-basisプロパティは高さを定義することになります。

このままだと li要素は横幅いっぱいに広がった状態です。この状態で各 li要素の幅も縮めたいとした時、その場合はwidthプロパティで横幅を指定します。

次のように、flexアイテムにwidth: 100px;を加えます。

.flex_container {
    display: flex;
    flex-direction: column;
    中略
}
.flex_container li {
    flex-basis: 70px;
    width: 100px;
    中略
}

次のように表示されます。

li要素のコンテンツの幅が100pxになりました。