柔軟なカードレイアウト | CSS Flexbox チュートリアル

はじめに

このプロジェクトでは、CSS Flexbox を使って柔軟なカードレイアウトを作成する方法を学びます。柔軟なカードレイアウトは、ウェブページやアプリケーションで一般的に使われるデザインパターンであり、コンテンツが応答性と適応性のあるグリッド状の構造で表示されます。

Flexible card layout preview

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

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

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

始めるには、エディタを開きます。エディタから flexible_card.html と flexible_card.css の 2 つのファイルが見えるはずです。

右下隅の「Go Live」をクリックしてポート 8080 を開き、ブラウザで flexible_card.html ページをプレビューします。結果は以下の通りになります。

unfinished project preview

このステップでは、目的の効果を得るためにレイアウトにフレックス要素をどのように使用するかを学びます。このステップを完了するには、以下の手順に従ってください。

更新された CSS コードは次のようになります。

section {
  display: flex; /* セクションを柔軟コンテナにする */
  /* その他のスタイル */
}

section セレクタに flex-wrap: wrap; プロパティを追加して、フレックスアイテムが同じ行に収まらない場合に次の行に折り返せるようにします。

更新された CSS コードは次のようになります。

section {
  display: flex;
  flex-wrap: wrap; /* フレックスアイテムが次の行に折り返せるようにする */
  /* その他のスタイル */
}

section セレクタに justify-content: space-between; プロパティを追加して、フレックスアイテムをメイン軸に沿って均等に分布させ、それらの間に均等なスペースをあけます。

更新された CSS コードは次のようになります。

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* フレックスアイテムをメイン軸に沿って均等に分布させる */
  /* その他のスタイル */
}

これらの 3 つの手順を完了すると、flexible_card.css ファイルは次のようになります。

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

これで、柔軟なカードレイアウトが完成し、例に示されている完成品と一致するはずです。

Finished flexible card layout

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。