このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
flex-basis
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年9月以降、すべてのブラウザーで利用可能です。
flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。
メモ:
flex-basis を単独で設定するのではなく、flex の一括指定を auto や initial などのキーワードを付けて使用することを推奨します。キーワード値は、flex-grow、flex-shrink、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: rgb(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'> で指定します。
値
content-
フレックスアイテムのコンテンツに基づいて、自動的に大きさを決めます。
<'width'>-
以下の単位のいずれかです。
<length>は絶対的な値を設定します。<percentage>は包含ブロックのコンテンツ領域の幅または高さに対する割合を設定します。flex-basisのパーセント値はフレックスコンテナーに対して解決されます。フレックスコンテナーのサイズが不定の場合、flex-basisの使用する値はcontentとなります。autoは横書きモードではwidthの値、縦書きモードではheightの値を使用します。対応する値もautoであった場合、代わりにcontentの値が使用されます。max-contentは幅の内在的な推奨値を設定します。min-contentは幅の内在的な最小値を設定します。fit-contentは、現在の要素のコンテンツに基づいて計算された、min-contentとmax-contentの値で囲まれた、包含ブロックのコンテンツ領域の使用可能な最大サイズを設定します。
公式定義
形式文法
flex-basis =
content |
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()> |
stretch |
fit-content |
contain
<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 テスト</li>
<li class="flex flex2">2: flex-basis テスト</li>
<li class="flex flex3">3: flex-basis テスト</li>
<li class="flex flex4">4: flex-basis テスト</li>
<li class="flex flex5">5: flex-basis テスト</li>
</ul>
<ul class="container">
<li class="flex flex6">6: flex-basis テスト</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: #333333;
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 値に解決されるからです。
仕様書
| 仕様書 |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-basis-property |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。