HTMLとCSS 〜Flexboxの使い方を学ぼう〜

1:横並びの方法
これからブロックレベル要素を横並び配置にする方法について学びます。ブロックレベル要素を横並びにするためには、displayプロパティにflexという値を指定します。

①display
displayプロパティは、要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティです。値には、変更したい要素の種類を設定します。

値との組み合わせdisplay: block; 説明：指定された要素はブロックレベル要素として表示されます
値との組み合わせdisplay: inline; 説明：指定された要素はインライン要素として表示されます
値との組み合わせdisplay: inline-block;　説明：指定された要素はインライン要素とブロックレベル要素の特性を併せ持ちます
値との組み合わせdisplay: flex; 説明：指定された要素の子要素は横並びになる
値との組み合わせdisplay: none; 説明：指定された要素は非表示になる

※ Flexboxでの横並び：親要素にdisplay: flex;を付与すると、直下の子要素が横並びになる。