子要素の均等配置

CSSCSSBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

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


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/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/selectors -.-> lab-35196{{"子要素の均等配置"}} css/display_property -.-> lab-35196{{"子要素の均等配置"}} css/flexbox -.-> lab-35196{{"子要素の均等配置"}} end

子要素の均等配置

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