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

JavaScriptでフレックスアイテムを縦方向（列）に表示する方法

JavaScriptでフレックスボックスのアイテムを縦方向（列）に並べて表示するには、flexFlowプロパティを使用します。flexFlowは、flex-direction（並びの方向）とflex-wrap（折り返しの有無）をまとめて指定できるショートハンドプロパティです。

サンプルコード

以下のコードを実行し、ボタンをクリックすると、JavaScriptによってフレックスアイテムが列方向に表示されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 1px solid #000000;
            width: 100px;
            height: 150px;
            display: flex;
            flex-flow: row wrap;
         }
         #box div {
            height: 40px;
            width: 40px;
         }
      </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>flexDirectionプロパティを使用</p>
      <button onclick = "display()">設定する</button>
      <script>
         function display() {
            document.getElementById("box").style.flexFlow = "column nowrap";
         }
      </script>
   </body>
</html>

コードのポイント

初期状態では、フレックスコンテナ（#box）に「flex-flow: row wrap」が設定されており、アイテムは横方向に並び、必要に応じて折り返されます。

ボタンがクリックされると、display()関数が実行され、次のコードによって並び方向が変更されます。

document.getElementById("box").style.flexFlow = "column nowrap";

この設定により、flex-directionが「column（縦方向）」、flex-wrapが「nowrap（折り返しなし）」に変更され、3つのDIV要素が縦一列に表示されるようになります。このように、JavaScriptからflexFlowプロパティを動的に操作することで、ユーザーの操作に応じてレイアウトを柔軟に切り替えることが可能です。

  1. JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説

    Webアプリケーション開発では、ToDoリストや通知一覧など、ユーザーの操作によってリスト項目を削除・非表示にしたいケースが数多くあります。本記事では、JavaScriptを使ってリストアイテムに「×」ボタンを実装し、クリックするとその項目を非表示にする方法を、動作するサンプルコード付きで詳しく解説します。 実装の仕組み この機能は、HTML・CSS・JavaScriptの3つを組み合わせて実現します。大まかな流れは以下のとおりです。 CSSで各リスト項目（<li>）の右端に「×」ボタンを絶対配置する querySelectorAll()でページ内のすべての閉じるボタン（.clo

  2. JavaScriptとFont Awesomeアイコンでアニメーション効果を作成する方法

    Webページに動きを加えることで、訪問者の視線を引きつけ、UIに彩りを添えることができます。Font Awesomeのようなアイコンフォントと、JavaScriptのタイマー関数である setTimeout() や setInterval() を組み合わせれば、外部ライブラリに頼ることなく、手軽にアイコンのアニメーション効果を実現できます。 仕組みはとてもシンプルです。一定時間ごとにアイコンのUnicode文字を入れ替えることで、アイコンが次々と切り替わって動いているように見せます。 実装のポイント Font AwesomeのCSSファイルをCDNから読み込む アイコンを表示する要素に「fa