今回入社した際に、最初はフロントエンドのコーディングをするとのことだったため、よく使う「displayの使い方」を改めて勉強した内容をまとめます。

displayとは？

displayとは、CSSのプロパティの1つで、要素の表示方式を制御します。主な値にはblock、inline、inline-block、flex、noneがあり、レイアウトの構造と見た目を調整できます。

参照：【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

デフォルトの値

displayはCSSで明示的に指定しなくても、タグを設定した時点でデフォルトの値が適応されています。

block・・p、div、ul、h1〜h6などのタグ
inline・・a、span、imgなどのタグ
inline-block・・デフォルト×
flex・・デフォルト×
none・・デフォルト×

「block」、「inline」、「inline-block」、「flex」の違い

並び方
「block」・・縦並び
「inline」「inline-block」・・横並び
「flex」・・縦横どちらも可能

幅と高さ
「block」「inline-block」「flex」・・指定可能
「inline」・・指定不可

余白
「block」「inline-block」「flex」・・上下左右ともに指定可能
「inline」・・横幅だけ指定可能

text-alignとvertical-align
「block」・・指定不可
「inline」「inline-block」・・指定可能
「flex」・・text-alignプロパティは、Flexboxの直接の子要素（フレックスアイテム）には影響しませんが、フレックスアイテム内のインラインコンテンツやテキストの水平方向の配置には使用できます。（ChatGPT参照）

※text-alignのイメージ

参照：【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

※vertical-alignのイメージ

参照：【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

「flex」の役割

ここまで見てきて「block」、「inline」、「inline-block」で一通りのことは再現できると思います。ではなぜ「flex」というものがあるのでしょうか？

ChatGPTで調べたところ下記の回答がありました。

ChatGPT：
Flexboxは、従来のblock、inline、inline-blockでは難しかったレイアウト課題に対応するために開発されました。レスポンシブデザインの容易化、要素の垂直中央揃え、スペースの均等分配、アイテムの順序変更、複数行フレックスアイテムの管理など、柔軟なレイアウトを簡単に実現できます。コードの簡素化と保守性の向上も大きな利点です。これにより、ウェブ開発者はより複雑なレイアウトを簡易かつ効率的に構築できるようになりました。

要するに従来のblock、inline、inline-blockを使ってデザインするより、「要素のレイアウトが格段にやりやすくなりました。」ということです。

実際にポートフォリオを作るときに調べていても、どのサイトもflexを使用している印象でした。
使っていてもシンプルでわかりやすく、直感的に使いやすい印象でした。

Flexboxの使い方は改めて投稿したいと思います。
→display:flexの使い方

参考文献

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
【初心者向け】フレックスボックスとは？display:flexの使い方（基礎編）
vertical-align - CSS: カスケーディングスタイルシート | MDN