はじめに
この実験では、CSS におけるフレックスボックスの中央揃えの概念を探ります。親要素内の子要素を水平および垂直方向に中央揃えする方法を学びます。この実験が終了すると、フレックスボックスの中央揃え技術を使って応答性が高く視覚的に魅力的なレイアウトを作成できるようになります。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 94%です。学習者から 100% の好評価を得ています。
フレックスボックスの中央揃え
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 でさらに多くの実験を練習できます。