Chapter 05

基本構文 2: FlexboxのHTML構造

Arisa Fukuzaki
Arisa Fukuzaki
2020.10.11に更新

Flexboxは、CSSスタイルのみの設定ではなく、HTML要素の構成から構築することが大切です。

3つのアイテム要素を、横一列に並列させる実例を見ていきましょう。

<ul class="container-body"><!-- コンテナー -->
  <li>Item 1</li><!-- アイテム -->
  <li>Item 2</li><!-- アイテム -->
  <li>Item 3</li><!-- アイテム -->
</ul>

Item 1, 2, 3とアイテム(子要素)があります。

この3つのアイテムを横一列に並列をさせたいので、コンテナー(親要素)で、ひとまとめにします。

HTML要素の構造ができたら、ここでFlexboxのCSSスタイルを設定します。