この実験では、CSS Flexbox に利用可能なさまざまなフレックス方向を調べ、フレックスコンテナ内で要素をどのように配置および位置付けるかを実践的な経験を通じて学びます。段階的なアプローチを通じて、HTML 構造を作成し、row、row-reverse、column、および column-reverse の方向を含むさまざまなフレックス方向のプロパティを順次実装します。
この実験では、まずフレックスコンテナと複数のフレックス要素を持つ基本的な HTML ファイルを設定し、フレックス方向がレイアウトにどのように影響するかを視覚的に示します。CSS の flex-direction プロパティを変更することで、要素の流れと位置付けを制御する方法を学び、CSS Flexbox の基本原理とその強力なレイアウト機能を理解します。
このステップでは、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 構造の主要なコンポーネントを分解してみましょう。
flex-container クラスを持つ <div> を作成し、これがフレックスコンテナとして機能します。flex-item クラスを持つ 4 つの <div> 要素があります。<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 ブラウザでこれを見ると、要素が垂直に配置されていることに気付きます。
これは、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>列逆のフレックス方向の主な特徴:
Web ブラウザでこれを見ると、以下のことが観察されます。
これは、flex-direction: column-reverse がフレックス要素の垂直積み重ね順序を変更する簡単な方法を提供する方法を示しています。
この実験では、参加者はフレックス方向の包括的なデモを作成することで CSS Flexbox の基本を学びます。この実験は、フレックスコンテナと複数のフレックス要素を備えた構造化された HTML ファイルを作成することから始まり、さまざまなレイアウト技術を理解するための視覚的な基礎を提供します。一連のフレックス方向のスタイルを実装することで、学習者は CSS Flexbox を使って要素の配置を操作する実践的な経験を得ます。
この実験は、参加者を 4 つの主要なフレックス方向の設定を通じて体系的に案内します。行方向（デフォルト）、行逆方向、列方向、列逆方向です。各方向は実際のコーディングを通じて調べられ、学生たちにフレックス方向がコンテナ内の要素の配置と流れにどのように影響するかを理解させます。このアプローチにより、学習者はフレキシブルボックスレイアウトの原則とその応答型ウェブデザインへの応用について微妙な理解を深めることができます。
