HTML DOM スタイルの flexBasis プロパティとは？使い方とサンプルコードを解説
flexBasis プロパティとは
HTML DOM のスタイルオブジェクトが持つ flexBasis プロパティは、display: flex; が適用された要素（フレックスアイテム）の初期サイズを指定するために使用されます。
重要なポイントとして、flex-basis に「auto」以外の値が設定されている場合、flexBasis プロパティは width プロパティよりも優先されるという仕様があります。フレックスレイアウトでアイテムの幅を制御する際には、この挙動を理解しておくことが大切です。
構文
flexBasis プロパティを JavaScript から設定する場合の基本構文は以下の通りです。
object.style.flexBasis = "number | auto | initial | inherit"
設定できる値の一覧
| 値 | 説明 |
|---|---|
| number | フレックスアイテムの初期サイズを、パーセンテージ（%）や px などの有効な長さ単位で指定します。 |
| auto | フレックスアイテム本来の長さと同じに設定します。長さが明示されていない場合は、コンテンツの大きさに応じて自動的に決まります。これがデフォルト値です。 |
| initial | このプロパティを初期値（デフォルト値）に戻します。 |
| inherit | 親要素のプロパティ値を継承します。 |
flexBasis プロパティの使用例
次のサンプルコードでは、ボタンをクリックすると div 要素内の画像（フレックスアイテム）の flex-basis 値が 200px に変更され、表示が動的に変化します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
#demo, #demo2{
background-color: #fff8dc;
margin: 10px;
height: 100px;
box-shadow: 0 0 0 4px brown;
display: flex;
}
#demo div {
flex-basis: 110px;
}
</style>
<script>
function changeFlexBasis() {
for(var i=1;i<3;i++){
document.getElementsByTagName("DIV")[i].style.flexBasis="200px";
}
document.getElementById("Sample").innerHTML="flex-basis の値が 200px に拡大されました";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
<div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
<div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
</div>
<p>下のボタンをクリックすると、div 内の画像の flex-basis プロパティが変更されます</p>
<button onclick="changeFlexBasis()">Change Flex Basis</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開くと、3 枚の画像が flex レイアウトによって横並びで表示されます。この時点では各アイテムの flex-basis は 110px に設定されています。
続いて、「Change Flex Basis」ボタンをクリックしてみましょう。JavaScript の changeFlexBasis() 関数が実行され、各画像の flex-basis が 200px に拡大され、以下のようにレイアウトが変化します。
まとめ
- flexBasis プロパティは、フレックスアイテムの主軸方向の初期サイズを指定するために使う。
- auto 以外の値が設定されている場合、
widthプロパティより優先される。 - 指定できる値は「number（長さ）」「auto」「initial」「inherit」の 4 種類。
- JavaScript から動的に変更することで、ユーザーの操作に応じた柔軟なレイアウト制御が可能になる。
-
HTML DOM の flexDirection プロパティとは?構文と使い方を実例付きで解説
HTML DOM の flexDirection プロパティは、フレックスコンテナ内の子要素(フレックスアイテム)をどの方向に配置するかを設定・取得するためのスタイルプロパティです。CSS の flex-direction プロパティに対応しており、JavaScript から動的にレイアウトの向きを変更したい場合に活用できます。 flexDirection プロパティの構文 flexDirection プロパティを設定する際の基本的な構文は以下のとおりです。 object.style.flexDirection = row | row-reverse | column | column-rev
-
HTML DOM スタイルのflexプロパティとは？使い方と設定例をわかりやすく解説
HTML DOM スタイルのflexプロパティとはHTML DOM の flex プロパティは、display プロパティが flex に設定されている要素に対して、柔軟な伸縮サイズを設定または取得するために使用されるプロパティです。このプロパティを利用することで、flexGrow（伸びる比率）、flexShrink（縮む比率）、flexBasis（基本サイズ）の3つのプロパティをまとめて操作できます。flexプロパティの構文flexプロパティを設定する場合の基本的な構文は以下の通りです。object.style.flex = flex-grow flex-shrink flex-basis|