データベースエンジニアが行く

display プロパティを説明しやすくするために先に div と span の違いを説明します。


div は画面サイズの横いっぱいまで占領します。div を複数並べた場合は自動的に改行されて縦方向に並びます。
span は改行されません。複数並べると改行されず横に並びます。


display: block;　
　　1行分の幅全部に適用されます。1つの要素が画面サイズの横いっぱいを占領します。
　　連続して指定すると自動的に改行されて縦方向に並びます。div のデフォルト値です。
display: inline;
　　1行のうちの一部に適用されます。連続して指定すると、改行されず横に並びます。
　　span のデフォルト値です。
display: inline-block;
　　要素全体はインライン（inline）要素、要素内はブロック（block）要素になります。
display: none;
　　画面に表示されません。
display: flex;
　　Flexboxモデルにしたがって表示されます。