はじめに
CSS レイアウトの基本実験へようこそ！この実践的なセッションでは、コンテナ内のアイテム間の配置、整列、スペースの分配を効率的に行う強力なレイアウトモデルである CSS Flexbox の基本を学びます。
この実験では、事前に設定された HTML ファイル (index.html) と CSS ファイル (style.css) を使用します。あなたのタスクは、style.css ファイルを変更して、ページ上の要素のレイアウトを操作することです。実験環境の Web 8080 タブに切り替えることで、リアルタイムで変更を確認できます。
以下の方法を学びます：
- フレックスコンテナの初期化。
justify-contentを使用したメイン軸に沿ったアイテムの整列。align-itemsを使用したクロス軸に沿ったアイテムの整列。flex-directionを使用したレイアウト方向の変更。flex-wrapを使用したアイテムの複数行への折り返し。
始めましょう！
コンテナ要素に display: flex を設定する
このステップでは、標準的なブロックレベル要素をフレックスコンテナに変換することから始めます。これは、あらゆるフレックスボックスレイアウトを作成するための基本的なステップです。
display: flex; プロパティは、親要素（コンテナ）に適用され、そのすべての子要素（アイテム）に対してフレックスコンテキストを有効にします。適用されると、子要素は自動的に行に並びます。
まず、画面左側のファイルエクスプローラーから style.css ファイルを開きます。
次に、.container CSS ルールを見つけます。このルールの中に display: flex; プロパティを追加します。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
/* We will add flex properties here */
display: flex;
}
コードを追加したら、ファイルを保存します。次に、Web 8080 タブに切り替えて結果を確認します。以前は縦に積み重ねられていた番号付きのボックスが、現在は横一列に水平に配置されていることに気づくでしょう。
justify-content プロパティに space-between を使用する
このステップでは、justify-content プロパティを使用して、メイン軸（デフォルトでは水平方向）に沿ったアイテムの配置を制御する方法を学びます。このプロパティは、コンテナ内の余分な空きスペースを分配するのに役立ちます。
space-between 値を使用します。これはアイテムを均等に分配します。最初のアイテムはコンテナの開始位置に、最後のアイテムは終了位置に配置され、残りのスペースはアイテム間に均等に分配されます。
style.css ファイルで、.container ルールに justify-content: space-between; プロパティを追加します。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
display: flex;
justify-content: space-between;
}
ファイルを保存し、Web 8080 タブを確認します。フレックスアイテムがコンテナの全幅にわたって広がり、アイテム間に均等なスペースが配置されているのがわかるでしょう。
align-items プロパティに center を適用する
このステップでは、align-items プロパティを使用して、クロス軸（デフォルトでは垂直方向）に沿ってアイテムを配置する方法を学びます。
垂直方向の配置の効果を確認するために、まずコンテナに高さを与える必要があります。その後、align-items に center 値を使用して、コンテナ内のアイテムを垂直方向の中央に配置します。
style.css ファイルで、.container ルールに height と align-items: center; プロパティを追加します。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}
ファイルを保存し、Web 8080 タブで結果を表示します。コンテナは以前より高くなり、すべてのフレックスアイテムが垂直方向のスペースの中央に完全に配置されているのがわかります。
flex-direction プロパティに column を実装する
このステップでは、flex-direction プロパティを使用して、メイン軸の方向を水平から垂直に変更します。
デフォルトでは、フレックスの方向は row です。これを column に設定することで、フレックスアイテムを垂直に積み重ねることができます。フレックスの方向を column に変更すると、メイン軸は垂直になり、クロス軸は水平になります。これは、justify-content が垂直方向の配置を制御し、align-items が水平方向の配置を制御することを意味します。
style.css ファイルで、.container ルールに flex-direction: column; プロパティを追加します。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
display: flex;
justify-content: space-between;
height: 400px; /* より良い視覚化のために高さを増やします */
align-items: center;
flex-direction: column;
}
注：column レイアウトで justify-content の効果をより良く見るために、高さを 400px に増やしました。
ファイルを保存し、Web 8080 タブで変更を確認します。アイテムは現在、単一の列に積み重ねられています。justify-content: space-between がアイテム間に垂直方向にスペースを追加し、align-items: center がそれらを水平方向に中央揃えしていることに注目してください。
flex-wrap プロパティに wrap を追加して折り返しを行う
この最終ステップでは、フレックスアイテムがコンテナからはみ出す場合の対処方法を学びます。flex-wrap プロパティを使用すると、アイテムは縮小したりはみ出したりする代わりに、新しい行に折り返されます。
これを実証するために、行ベースのレイアウトに戻し、すべてのアイテムを 1 行に収めるには狭すぎるコンテナに固定幅を設定します。
まず、前のステップのプロパティ（justify-content、align-items、flex-direction、height）を削除して .container ルールを整理します。次に、固定 width と flex-wrap: wrap; プロパティを追加します。
style.css の .container ルールを次のように更新します。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
display: flex;
width: 450px; /* 折り返しを強制するために固定幅を設定 */
flex-wrap: wrap;
}
ファイルを保存し、Web 8080 タブを更新します。最初の行に収まらないフレックスアイテムが、2 行目に折り返されているのがわかります。これは、さまざまな画面サイズに適応するレスポンシブレイアウトを作成するために不可欠です。
まとめ
CSS レイアウトの基本実験、お疲れ様でした！CSS Flexbox のコアコンセプトを習得し、それらを適用して柔軟でレスポンシブなレイアウトを作成することができました。
この実験では、以下のことを実践しました。
display: flex;: フレックスコンテナを作成します。justify-content: メイン軸に沿ってアイテムを配置します。align-items: クロス軸に沿ってアイテムを配置します。flex-direction: メイン軸の方向（行または列）を定義します。flex-wrap: アイテムを複数行に折り返すことを許可します。
これらのプロパティは、現代のウェブデザインの構成要素です。これらのプロパティにさまざまな値を試して、Flexbox の理解をさらに深めることをお勧めします。
