子要素の均等配置

はじめに

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

Skills Graph

子要素の均等配置

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 でさらに多くの実験を行って練習することができます。