CSS フレックスボックスの中央揃え | 応答型ウェブデザイン

はじめに

この実験では、CSS におけるフレックスボックスの中央揃えの概念を探ります。親要素内の子要素を水平および垂直方向に中央揃えする方法を学びます。この実験が終了すると、フレックスボックスの中央揃え技術を使って応答性が高く視覚的に魅力的なレイアウトを作成できるようになります。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/selectors -.-> lab-35198{{"応答型フレックスボックスの中央揃え技術"}} css/box_model -.-> lab-35198{{"応答型フレックスボックスの中央揃え技術"}} css/width_and_height -.-> lab-35198{{"応答型フレックスボックスの中央揃え技術"}} css/display_property -.-> lab-35198{{"応答型フレックスボックスの中央揃え技術"}} css/flexbox -.-> lab-35198{{"応答型フレックスボックスの中央揃え技術"}} end

フレックスボックスの中央揃え

VM 内には既に index.html と style.css が用意されています。

親要素内の子要素をフレックスボックスを使って水平および垂直方向に中央揃えするには、次の手順に従います。

親要素の display プロパティを flex に設定して、フレックスボックスレイアウトを作成します。
justify-content プロパティの値を center に設定して、子要素を水平方向に中央揃えします。
align-items プロパティの値を center に設定して、子要素を垂直方向に中央揃えします。
親要素内に子要素を追加します。

以下はコードの例です。

<div class="flexbox-centering">
  <div>Centered content.</div>
</div>

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはフレックスボックスの中央揃えの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。