質問
- 要素を横並びにしたいのですが、やり方が分からなくて困っています。
- floatで横並びに出来るけどすぐに崩れてしまう。
このような疑問にお答えします！
記事を書いている人 
ゆーさく（@yusaku_blog）
僕はエンジニアの会社にも勤めていたことがあるので、
その経験も踏まえて話していきたいと思います。
display:flexについて
プログラミングを最近学び始めた方は、要素を横にすると聞くとfloatを思い浮かべると思いますが、ぶっちゃけこれは使わない方がいいです。
なぜかというと、floatはコードを少しいじるだけでも崩れるので、あまりオススメはしません。
ですので最近、便利だと注目されつつあるdisplay:flexを使って説明していきたいと思います。
僕も最近、display:flexの存在を知って使ってみると、勝手に綺麗に並んでくれるので本当に便利です。
display:flexの使い方
display:flexの使い方は本当に簡単です！
横並びにしたい要素を子要素として、親要素の中にいれます。
そして、CSSで親要素にdisplay:flexと入力するだけです。
文章だけだと伝わりにくいと思いますので、実際に試してみます。
まず、横並びにしたいコードを決めます。
ここでは例として4つのボタンを横並びにしたいと思います。
html<button class="btn-flex">BUTTON</button><button class="btn-flex">BUTTON</button><button class="btn-flex">BUTTON</button><button class="btn-flex">BUTTON</button>
このままではボタンが横並びのままなので、
まずは、横並びにしたい要素を子要素にするために
<div class="flex"></div>で括ります。
することはたったこれだけです。
html<div class="flex"><button class="btn-flex">BUTTON</button><button class="btn-flex">BUTTON</button><button class="btn-flex">BUTTON</button></div>
command.flex{display:flex;}
これで完璧です!