違いを意識するようになったきっかけ
ページを作る際に、横に二つ並べたいとかいうことってありますよね。その時にinline-blockで二つ並べていたのですが、他の人のコードを見て見るとflexで並べていると気づいたことから違いが気になって調べて見ました。
それぞれの特徴
display: inline-blockの特徴
まず、要素の表示形式には三つ種類があります。inline要素、block要素、inline-block要素の三つです。inline-blockはinlineとblockの特徴を持ってるハイブリッドみたいな感じだと思ってます。
横に並べるのに有効
divタグなどのblock要素を横に並べたいときなどに使います。inlineのように横に並べていくことができます。また、inline要素とは違って、widthとheightも指定することができるので便利です。
display: flexの特徴
display: flexは親の要素につけることで、子要素を横並びにする時などに使います。要素間のスペースなど、高さを整えるのにすごく便利です。justify-contentやalign-itemsなど便利なものがたくさんあります。
まとめ
自分は要素を横に並べる時に二つとも使ってみてflexの方が使いやすいと感じました。flexだと一つの要素を中央に寄せたい時などにも使えますし、flexboxでやりたいことはなんでもできるのではと感じます。