常に新しい行に表示され、幅が可能な限り広がります（親要素の幅に従う）。セクション、段落、ヘッダーなど、コンテンツ全体を区切るために使用されます。
新しい行を作らずに他の要素と同じ行に表示されます。幅は内容に合わせて決まります。 強調、リンク、アイコンなど、テキストの一部として扱うために使用されます。
inline要素のように同じ行に表示されますが、block要素のように幅と高さを設定できます。メニュー項目、ボタン、ラベルなど、レイアウトに柔軟性を持たせたい場合に使用されます。
柔軟なレイアウトを提供するフレックスコンテナになります。子要素（フレックスアイテム）はフレックスボックスモデルに基づいて配置されます。レスポンシブデザイン、ナビゲーションバー、カードレイアウトなど、複雑なレイアウトを簡単に管理するために使用されます。
グリッドコンテナになります。子要素（グリッドアイテム）はグリッドレイアウトモデルに基づいて配置されます。ダッシュボード、写真ギャラリー、複雑なウェブページレイアウトなど、2次元のレイアウトを簡単に管理するために使用されます。
ページ上に表示されず、他の要素に影響を与えません。要素を一時的に非表示にする場合（例えば、JavaScriptでの表示/非表示の切り替え）、コンテンツの管理やフィルタリングなどに使用されます。