Flexboxで子要素の並び方を設定するプロパティ
当ページのリンクには広告が含まれています。
Flexboxのプロパティをいつも忘れてしまいます
Flexboxで子要素のレイアウトを指定するプロパティの説明をします
目次
Flexboxは子要素の並び方を設定できる
CSSのFlexboxは子要素の並び方を指定することでいろいろなレイアウトにすることができます。
この記事では、Flexboxの親要素に指定して子要素の並び方を設定するプロパティに付いて説明します。
- display: flex; と一緒に親要素に指定するFlexboxのプロパティを説明します
- 操作できるデモ画面でプロパティの値による動きの違いを説明します
親要素に display: flex; を設定するとFlexboxになる
まずは、レイアウトを指定したい要素の親要素に display: flex; を設定してFlexboxにします。Flexboxは他に何も指定しない場合、中の子要素が横に並びます。グローバルメニューをリストを横並びにして作るときなどにもよく使います。
Flexboxは初期状態では子要素が横向きに並びます。
生徒
先生