JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでフレキシブルアイテムの初期サイズ（flex-basis）を設定する方法

flexBasisプロパティとは

JavaScriptでフレキシブルアイテムの初期の長さ（基本サイズ）を設定するには、flexBasisプロパティを使用します。これはCSSのflex-basisに対応するプロパティで、フレックスコンテナ内におけるアイテムの主軸方向の初期サイズを指定します。

flexBasisにはpxや%などの値を設定でき、既定値はautoです。flexGrowやflexShrinkと組み合わせることで、画面サイズに応じた柔軟なレイアウトを構築できます。

サンプルコード

以下の例では、ボタンをクリックするとJavaScriptによって3番目のフレキシブルアイテム（DIV3）の初期の長さが20pxから100pxに変更されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 1px solid #000000;
            width: 450px;
            height: 150px;
            display: flex;
         }
         #box div {
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 20px;
         }
      </style>
   </head>
   <body>
      <div id = "box">
         <div style = "background-color:orange;">DIV1</div>
         <div style = "background-color:blue;">DIV2</div>
         <div style = "background-color:yellow;" id="myID">DIV3</div>
      </div>

      <p>flexBasisプロパティを使用</p>
      <button onclick = "display()">設定する</button>

      <script>
         function display() {
            document.getElementById("myID").style.flexBasis = "100px";
         }
      </script>
   </body>
</html>

コードの解説

  • 親要素#boxにdisplay: flexを指定して、フレックスコンテナを作成しています。
  • 各子要素にはflex-grow: 0、flex-shrink: 1、flex-basis: 20pxが設定されており、初期状態ではすべてのアイテムが20pxの幅になります。
  • ボタンをクリックするとdisplay()関数が呼び出され、document.getElementById("myID")で取得したDIV3に対してstyle.flexBasis = "100px"が適用され、そのアイテムだけ幅が100pxに拡張されます。

まとめ

このように、JavaScriptからelement.style.flexBasisへ値を代入するだけで、フレキシブルアイテムの初期サイズを動的に変更できます。ユーザーの操作に応じてレイアウトを調整したい場合などに活用できる便利な手法です。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. JavaScriptで要素の周囲のアウトライン（外枠）スタイルを設定する方法

    要素のアウトライン（輪郭線）のスタイルを設定するには、JavaScriptの outlineStyle プロパティを使用します。このプロパティを使うことで、実線（solid）・点線（dotted）・破線（dashed）など、さまざまな種類のアウトラインを動的に適用できます。 主なoutlineStyleの値 solid … 実線 dotted … 点線 dashed … 破線 double … 二重線 none … アウトラインなし（初期値） また、アウトラインの色は outlineColor プロパティ、太さは outlineWidth プロパティで個別に指定できます。 サンプルコード