flex-basis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。
メモ: flex 一括指定を使用する方が、個別に flex-grow、flex-shrink、flex-basis の宣言を使用するよりも推奨されます。この文書では、一括指定成分の一つである flex-basis プロパティについて説明していますので、ここではこれらを別個のものとしています。
試してみましょう
flex-basis: auto; flex-basis: 0; flex-basis: 200px; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element">Item One</div> <div>Item Two</div> <div>Item Three</div> </section> .default-example { border: 1px solid #c5c5c5; width: auto; max-height: 300px; display: flex; } .default-example > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: auto; } この例では、3 つすべてのアイテムの flex-grow と flex-shrink プロパティがともに 1 に設定されており、フレックスアイテムが初期の flex-basis から伸長したり縮小したりできることを示しています。
このデモでは最初のフレックスアイテムに設定する flex-basis 値を変更し、利用できる空間いっぱいに伸長させたり縮小させたりします。他のフレックスアイテムもサイズが変更され、少なくとも min-content のサイズになります。例えば、最初のアイテムの flex-basis を 200px に設定すると、始めは 200px ですが、利用できる空間に合うように縮小されます。
もし flex-basis が auto 以外の値に設定されていて、同じフレックスアイテムに width （flex-direction: column の場合は height）が設定されている場合は、flex-basis の値が優先されます。
構文
/* 幅を指定する */ flex-basis: 10em; flex-basis: 3px; flex-basis: 50%; flex-basis: auto; /* 固有のサイズ指定キーワード */ flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* フレックスアイテムの内容に基づいて自動設定する */ flex-basis: content; /* グローバル値 */ flex-basis: inherit; flex-basis: initial; flex-basis: revert; flex-basis: revert-layer; flex-basis: unset; flex-basis プロパティは、content キーワードまたは <'width'> で指定します。
値
<'width'>-
以下の単位のいずれかです。
<length>は絶対的な値を設定します。<percentage>は包含ブロックのコンテンツ領域の幅または高さに対する割合を設定します。flex-basisのパーセント値はフレックスコンテナーに対して解決されます。フレックスコンテナーのサイズが不定の場合、flex-basisの使用する値はcontentとなります。autoは横書きモードではwidthの値、縦書きモードではheightの値を使用します。対応する値もautoであった場合、代わりにcontentの値が使用されます。max-contentは幅の内在的な推奨値を設定します。min-contentは幅の内在的な最小値を設定します。fit-contentは、現在の要素のコンテンツに基づいて計算された、min-contentとmax-contentの値で囲まれた、包含ブロックのコンテンツ領域の使用可能な最大サイズを設定します。
content-
フレックスアイテムの内容物に基づいて、自動的に大きさを決めます。
公式定義
形式文法
flex-basis =
content |
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
例
フレックスアイテムの初期の寸法の設定
HTML
<ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> CSS
.container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex::after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { flex-basis: auto; } .flex1::after { content: "auto"; } .flex2 { flex-basis: max-content; } .flex2::after { content: "max-content"; } .flex3 { flex-basis: min-content; } .flex3::after { content: "min-content"; } .flex4 { flex-basis: fit-content; } .flex4::after { content: "fit-content"; } .flex5 { flex-basis: content; } .flex5::after { content: "content"; } 結果
flex-basis の 0 と 0% の違い
この例は flex-basis が 0 の場合と flex-basis が 0% の場合との違いを示します。 flex-direction が column に設定されており、フレックスコンテナーとフレックスアイテムに高さが設定されていない場合です。 0 は絶対的な長さですが、パーセント値の flex-basis の値は content の値に解決します。
HTML
同じ構造のフレックスコンテナーを 2 つ設置しています。これらのコンテナーは、 flex-basis の値以外は同じようにスタイル設定されています。コンテナーはそれぞれ見出しの <div> と <section> の 2 つの子要素を持っています。 <section> 要素はコンテンツとして <div> を持っていますが、これはフレックスアイテムとしては設定されませんが、高さは指定されます。
<div class="container basis-0"> <div>見出し</div> <section> flex-basis: 0; <div class="content"></div> </section> </div> <div class="container basis-0-percent"> <div>見出し</div> <section> flex-basis: 0%; <div class="content"></div> </section> </div> CSS
コンテナーを横に並んでいるインラインフレックスコンテナーとしてスタイル設定し、比較しやすくします。 flex-direction を column に設定します。最初のコンテナーのフレックスアイテムの flex-basis 値は 0、 2 つ目のコンテナーのフレックスアイテムの flex-basis 値は 0% です。どちらのフレックスコンテナーもそのフレックスアイテムも高さは明示的に設定されていませんが、 section 要素の高さは 200px を超えることができず、子要素の高さは 300px になります。
.container { width: 40vw; padding: 1rem; border: 1px dashed blue; display: inline-flex; flex-direction: column; } section { border: 1px solid red; overflow: auto; min-height: 200px; } .content { background: wheat; height: 300px; } .container.basis-0 > * { flex-basis: 0; } .container.basis-0-percent > * { flex-basis: 0%; } 結果
最初のコンテナーの中には flex-basis: 0 が設定されており、 <section> 要素の初期主要サイズはゼロで、高さ制限の 200px まで伸長します。 2 つ目のコンテナーの中では、 flex-basis: 0%では、 <section> 要素は 300px の初期主要サイズになります。なぜなら、フレックスコンテナーは高さを設定していないので、パーセント値の flex-basis の値が content 値に解決されるからです。
仕様書
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-basis-property |