Flexbox 野菜レイアウトデザインのマスター

はじめに

このプロジェクトでは、Flexbox CSS プロパティを使用して、特定のデザインで新鮮な野菜のレイアウトを配置する方法を学びます。このプロジェクトが終了すると、応答性と動的なウェブデザインを作成するための強力なツールである Flexbox を使用して、視覚的に魅力的なレイアウトを作成できるようになります。

👀 プレビュー

Flexbox 野菜レイアウトの例

🎯 タスク

このプロジェクトでは、以下を学びます。

Flexbox CSS プロパティを使用してレイアウトを設定する方法
レイアウト内の希望の位置に野菜を配置する方法
display、justify-content、align-items、align-self などの Flexbox プロパティを使用して、希望のレイアウトを達成する方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

応答性と動的なウェブデザインを作成するための強力なツールである Flexbox を使用して、視覚的に魅力的なレイアウトを作成すること
Flexbox CSS プロパティを使用して柔軟で応答性のあるレイアウトを作成する方法を理解すること
Flexbox コンテナ内の要素を整列および分散させるための技術を適用すること
特定のデザインを達成するために、Flexbox レイアウト内の要素を配置するための戦略を実装すること

プロジェクトをセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。このフォルダには、以下のファイルとディレクトリが含まれています。
- css/style.css
- index.html
WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

未完成のプロジェクトセットアップ画面

レイアウトをセットアップする

このステップでは、Flexbox CSS プロパティを使用して野菜の配置のレイアウトをセットアップする方法を学びます。

エディタで style.css ファイルを開きます。
#box1 セレクタの中に、以下の CSS プロパティを追加します。
```
#box1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
これにより、#box1 コンテナ内のコンテンツが水平および垂直方向に中央に配置されます。
#box2 セレクタの中に、以下の CSS プロパティを追加します。
```
#box2 {
  display: flex;
  justify-content: space-between;
}
```
これにより、#box2 コンテナ内の要素が均等に配置され、要素間に余白があります。
#box2.item:nth-child(2) セレクタの中に、以下の CSS プロパティを追加します。
```
#box2.item:nth-child(2) {
  align-self: flex-end;
}
```
これにより、#box2 内の 2 番目の要素がコンテナの下部に配置されます。

野菜を配置する

このステップでは、Flexbox CSS プロパティを使用して野菜を希望の位置に配置する方法を学びます。

#box3 セレクタの中に、以下の CSS プロパティを追加します。
```
#box3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
```
これにより、#box3 内の要素に対して横並びのレイアウトが作成され、要素間に均等な間隔を空けて配置されます。
#box3.item:nth-child(2) セレクタの中に、以下の CSS プロパティを追加します。
```
#box3.item:nth-child(2) {
  align-self: center;
}
```
これにより、#box3 内の 2 番目の要素がコンテナの中央に配置されます。
#box3.item:nth-child(3) セレクタの中に、以下の CSS プロパティを追加します。
```
#box3.item:nth-child(3) {
  align-self: flex-end;
}
```
これにより、#box3 内の 3 番目の要素がコンテナの下部に配置されます。