子要素の均等配置：CSS のマスタリー

はじめに

この実験では、CSS プログラミングの基礎を学び、HTML ドキュメントにスタイルを適用する方法を学びます。一連の実践的な演習を通じて、CSS ルールを作成および変更する方法、特定の要素を対象とするセレクターの使用方法、およびテキスト、背景、および境界にスタイルを適用する方法を学びます。この実験が終了するとき、CSS について十分な理解を得ており、視覚的に魅力的な Web ページを作成するためにそれを使用できるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

子要素の均等配置

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

親要素内の子要素を均等に配置するには、親要素の display プロパティを flex に設定してフレックスボックスレイアウトを使用します。子要素を水平方向に均等な間隔で配置するには、justify-content: space-between を使用します。子要素の周りに余白を持たせて配置するには、justify-content: space-around を使用します。以下は例です：

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

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

まとめ

おめでとうございます！あなたは「子要素の均等配置」の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。