CSS Flexbox による果物の配置チュートリアル | 応答型レイアウトデザイン

はじめに

このプロジェクトでは、CSS Flexbox を使って果物の配置レイアウトを作成する方法を学びます。また、align-self と order のプロパティを使って、ボウルの中の果物を配置し整列させる方法を学びます。

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

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

このステップでは、プロジェクト構造を設定する方法を学びます。

始めるには、エディタを開きます。エディタから index.html、style.css および images のいくつかのファイルが表示されるはずです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

このステップでは、果物の配置にスタイルを適用するために align-self と order のプロパティをどのように使うかを学びます。以下の手順に従ってこのステップを完了しましょう。

あなたの index.css ファイルは今次のようになっているはずです。

.yellow {
  align-self: flex-end;
  order: 1;
}

align-self プロパティは、個々のフレックス項目を交差軸に沿って整列させるために使用され、align-items の値を上書きします。この場合、黄色い果物をボウルの底部に整列させるために flex-end に設定しました。

order プロパティは、フレックス項目の順序を変更するために使用されます。黄色い果物に対しては 1 に設定しました。これにより、フレックスコンテナの末尾に配置されます。

完成した結果は以下の通りです。

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。