【HTML】要素を横に並べる方法&横並びを解除する方法【CSS】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回は要素を横に並べる&解除する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

要素を横に並べたい

普通にHTML・CSSを記述すると、各要素は縦に並んでしまいますが、
横に並べるにはどうすればよいか、解説します

結論：親要素にdisplay:flexを設定しよう

See the Pen
flex by samehack (@samehack)
on CodePen.

display:flex;
このように記述することで、.wrapの子要素がすべて横並びとなりました。

横並びを解除したい

結論：flex-directionを設定しよう

See the Pen
flex-direction by samehack (@samehack)
on CodePen.

flex-direction:column;
このように記述することで、明示的に縦並びに変更できます。

まとめ