超初心者向け HTMLで要素を横並びにしたい!! 時

目次

1.要素の横並び
2.横の並び方を調整

要素の横並び

今まで、ブロック要素やインライン要素も理解できない、親要素子要素も分からない状態で場当たり的に「要素　横並び」とかで調べた内容でfloat:left;とかを上手く動くまで適当に試してめちゃめちゃ苦戦してました。

よく分からないけど横並びにさせたい！！って場合にとりあえず使ってみてください。笑

結論　flexbox めっちゃ楽。

float:left;使ってると変なところが横並びになってしまったり、何をどうしていいかわからない状態に僕はよく陥ってました。
なんで横に並べるだけなのにこんなに面倒臭いんだと...

flexboxを使うと簡単シンプルに横並びができます！

使い方

並べたい要素くん達が入っている親要素に、display: flex;とCSSで書くだけ！！

下記の例でいくと
A B C を横並びにしたい。
この場合、ABC達が入っている「field」クラスに対してdisplay: flex;　を書きます!
これだけ！

display: flex;　を書く場所間違えちゃうと動かないのでそこだけ注意です!

.html

  <div class="field">
    <div class="card">A</div>
    <div class="card">B</div>
    <div class="card">C</div>
  </div>

.css

.field {
display: flex;
}

めちゃめちゃ簡単にできちゃいました。

もー少し綺麗に並べたいよって方は読み進めてみてください!

横の並び方を調整

横の並び方は、親要素にjustify-contentを書くことで調整できます!
親要素ってどこ?という方は、display: flex;を書いたところです
今回は5種類だけ紹介します!
画像で見方がわかりやすいと思うのであまり解説書きません。。

space-around 　画面の幅に応じて中心からいい感じ広がってくれる

自分的にはこれが一番便利かなーと思っています
justify-content: space-around;

space-between 最初と最後の要素を両端に。あとは均等にいい感じ

justify-content: space-between;

center 間隔なしで中央に寄せる

justify-content: center;

flex-start 左寄せ

justify-content: start;

flex-end 右寄せ

右よせ、ABCの並び順はそのまま!
justify-content: start;