CSS Flexbox でのフレックス方向を探る

CSSCSSBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、CSS Flexbox に利用可能なさまざまなフレックス方向を調べ、フレックスコンテナ内で要素をどのように配置および位置付けるかを実践的な経験を通じて学びます。段階的なアプローチを通じて、HTML 構造を作成し、row、row-reverse、column、および column-reverse の方向を含むさまざまなフレックス方向のプロパティを順次実装します。

この実験では、まずフレックスコンテナと複数のフレックス要素を持つ基本的な HTML ファイルを設定し、フレックス方向がレイアウトにどのように影響するかを視覚的に示します。CSS の flex-direction プロパティを変更することで、要素の流れと位置付けを制御する方法を学び、CSS Flexbox の基本原理とその強力なレイアウト機能を理解します。

Flexbox のデモ用の HTML 構造を設定する

このステップでは、CSS Flexbox の方向をデモするための基本的な HTML 構造を作成します。複数の div 要素を持つ簡単な HTML ファイルを設定し、さまざまなフレックス方向を調べるのに役立ちます。

まず、WebIDE を開き、~/project ディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、flexbox-demo.html という新しいファイルを作成します。

次の HTML コードを flexbox-demo.html ファイルにコピーします。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox Direction Demo</title>
    <style>
      .flex-container {
        display: flex;
        border: 2px solid #333;
        margin-bottom: 20px;
        padding: 10px;
      }
      .flex-item {
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: #4caf50;
        color: white;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
      <div class="flex-item">Item 4</div>
    </div>
  </body>
</html>

この HTML 構造の主要なコンポーネントを分解してみましょう。

  1. flex-container クラスを持つ <div> を作成し、これがフレックスコンテナとして機能します。
  2. コンテナの中には、flex-item クラスを持つ 4 つの <div> 要素があります。
  3. <style> セクションでは、次のような基本的な CSS を追加しています。
    • コンテナに display: flex を設定します。
    • フレックス要素に固定サイズと背景色を与えます。
    • 表示性のための基本的なスタイリングを追加します。

この初期設定は、次のステップでさまざまなフレックス方向をデモするための、クリーンで簡単な構造を提供します。

行方向のフレックス方向を実装する

このステップでは、CSS Flexbox のデフォルトのフレックス方向である行方向について学びます。行方向は、フレックス要素が左から右に水平に配置されるデフォルトのレイアウトです。

WebIDE で flexbox-demo.html ファイルを開き、<style> セクションを変更して、フレックス方向を明示的に行方向に設定します。

<style>
  .flex-container {
    display: flex;
    flex-direction: row; /* 明示的に行方向を設定 (デフォルト) */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

行方向のフレックス方向に関するポイント:

  • 要素は左から右に水平に配置されます。
  • flex-direction: row はフレックスコンテナのデフォルト値です。
  • 各要素は元の順序を維持します。
  • 主軸は水平方向になります。
  • クロス軸は垂直方向になります。

Web ブラウザでの例の出力では、左から右に水平な線に 4 つの緑色の四角が配置されています。

視覚的な違いを理解するために、要素が追加の設定なしで自然に横並びに配置される方法に注目してください。これは、デフォルトの行方向のフレックス方向の動作を示しています。

行逆のフレックス方向を実装する

このステップでは、水平レイアウトを維持したままでフレックス要素の順序を変える row-reverse フレックス方向を調べます。

WebIDE で flexbox-demo.html ファイルを開き、<style> セクションを変更してフレックス方向を row-reverse に設定します。

<style>
  .flex-container {
    display: flex;
    flex-direction: row-reverse; /* 要素の順序を水平方向に逆にする */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

行逆のフレックス方向の主な特徴:

  • 要素は依然として水平に配置されます。
  • 順序が右から左に逆になります。
  • 最初の要素が今は右側に表示されます。
  • 主軸は水平方向になっていますが、右から始まります。
  • クロス軸は垂直方向になっています。

Web ブラウザでこれを見ると、要素が右から左に配置されており、左側には最初に "Item 4" が、右側には "Item 1" が表示されることに気付きます。

これは、flex-direction: row-reverse が水平レイアウトを維持したままでフレックス要素の視覚的な順序を変更できる方法を示しています。

列方向のフレックス方向を実装する

このステップでは、フレックス要素を上から下に垂直に配置する column フレックス方向を調べます。

WebIDE で flexbox-demo.html ファイルを開き、<style> セクションを変更してフレックス方向を column に設定します。

<style>
  .flex-container {
    display: flex;
    flex-direction: column; /* 要素を垂直に配置する */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
    height: 500px; /* 垂直レイアウトを表示するために高さを追加する */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

列方向のフレックス方向の主な特徴:

  • 要素が今は上から下に垂直に配置されます。
  • 主軸が今は垂直方向になります。
  • クロス軸が今は水平方向になります。
  • 要素が重ねて配置されます。
  • 垂直レイアウトをよりよく視覚化するためにコンテナの高さを追加しました。

Web ブラウザでこれを見ると、要素が垂直に配置されていることに気付きます。

  • "Item 1" が一番上にあります。
  • "Item 2" が "Item 1" の下にあります。
  • "Item 3" が "Item 2" の下にあります。
  • "Item 4" が一番下にあります。

これは、flex-direction: column がレイアウトを水平から垂直に変更し、Flexbox を使って垂直レイアウトを作成する簡単な方法を提供する方法を示しています。

列逆のフレックス方向を実装する

このステップでは、フレックス要素を下から上に垂直に配置する column-reverse フレックス方向を調べます。

WebIDE で flexbox-demo.html ファイルを開き、<style> セクションを変更してフレックス方向を column-reverse に設定します。

<style>
  .flex-container {
    display: flex;
    flex-direction: column-reverse; /* 要素を下から上に垂直に配置する */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
    height: 500px; /* 垂直レイアウトを表示するために高さを追加する */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

列逆のフレックス方向の主な特徴:

  • 要素が下から上に垂直に配置されます。
  • 主軸は垂直方向ですが、下から始まります。
  • クロス軸は水平方向です。
  • 要素が逆順に積み重ねられます。
  • "Item 4" が今は一番上に表示されます。
  • "Item 1" がコンテナの一番下にあります。

Web ブラウザでこれを見ると、以下のことが観察されます。

  • 垂直レイアウトが維持されます。
  • 項目の順序は標準的な列方向と比較して逆になっています。
  • 視覚的な階層が逆転しています。

これは、flex-direction: column-reverse がフレックス要素の垂直積み重ね順序を変更する簡単な方法を提供する方法を示しています。

まとめ

この実験では、参加者はフレックス方向の包括的なデモを作成することで CSS Flexbox の基本を学びます。この実験は、フレックスコンテナと複数のフレックス要素を備えた構造化された HTML ファイルを作成することから始まり、さまざまなレイアウト技術を理解するための視覚的な基礎を提供します。一連のフレックス方向のスタイルを実装することで、学習者は CSS Flexbox を使って要素の配置を操作する実践的な経験を得ます。

この実験は、参加者を 4 つの主要なフレックス方向の設定を通じて体系的に案内します。行方向(デフォルト)、行逆方向、列方向、列逆方向です。各方向は実際のコーディングを通じて調べられ、学生たちにフレックス方向がコンテナ内の要素の配置と流れにどのように影響するかを理解させます。このアプローチにより、学習者はフレキシブルボックスレイアウトの原則とその応答型ウェブデザインへの応用について微妙な理解を深めることができます。