はじめに
このプロジェクトでは、CSS Flexbox を使って果物の配置レイアウトを作成する方法を学びます。また、align-self と order のプロパティを使って、ボウルの中の果物を配置し整列させる方法を学びます。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- 果物の配置用の HTML 構造を設定する方法
- 個々のフレックス項目を交差軸に沿って整列させるための
align-selfプロパティの使い方 - フレックス項目の順序を変更するための
orderプロパティの使い方 - Flexbox を使って果物を望ましいレイアウトに配置する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- CSS Flexbox を使って応答性が高く視覚的に魅力的なレイアウトを作成する
- 要素の配置と整列を制御するために
align-selfとorderのプロパティを適用する - 望ましいデザインを達成するために CSS セレクターとプロパティを使う
プロジェクト構造を設定する
このステップでは、プロジェクト構造を設定する方法を学びます。
始めるには、エディタを開きます。エディタから index.html、style.css および images のいくつかのファイルが表示されるはずです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
果物の配置にスタイルを適用する
このステップでは、果物の配置にスタイルを適用するために align-self と order のプロパティをどのように使うかを学びます。以下の手順に従ってこのステップを完了しましょう。
- エディタで
index.cssファイルを開きます。 .yellowクラスを対象にして、align-selfプロパティをflex-endに設定します。.yellowクラスのorderプロパティを1に設定します。
あなたの index.css ファイルは今次のようになっているはずです。
.yellow {
align-self: flex-end;
order: 1;
}
align-self プロパティは、個々のフレックス項目を交差軸に沿って整列させるために使用され、align-items の値を上書きします。この場合、黄色い果物をボウルの底部に整列させるために flex-end に設定しました。
order プロパティは、フレックス項目の順序を変更するために使用されます。黄色い果物に対しては 1 に設定しました。これにより、フレックスコンテナの末尾に配置されます。
完成した結果は以下の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。
