【CSS】flexの指定方法｜横並び・右揃え・左揃え・真ん中揃え

最近、「inline-block」より「flex」が楽な事に気付いてしまいました。
そんなもんだから、「flex」を使って書くけど、まだ覚えられなくて毎回調べちゃうから「覚えよう！」と思ってココに書きます！
自分がよく使うものだけしか書いてないので、他にもコレ使えるよ！っていうのが有ったら、このフレックス初心者に教えて欲しいです。
ではでは、使いまわせるHTMLとCSSを下に書きます！

基本HTML１

<ul class="flex">
  <li>１</li>
  <li>２</li>
  <li>３</li>
</ul>

両端にイイ感じの隙間が空いたflex「space-around」

.flex {
  display: flex;
  justify-content: space-around;
}

• １
• ２
• ３

端っこがピッタリ端にくっついたflex「space-between」

.flex {
  display: flex;
  justify-content: space-between;
}

• １
• ２
• ３

真ん中でピタっとくっついたflex「center」

.flex {
  display: flex;
  justify-content: center;
}

• １
• ２
• ３

右端にピタっとくっついた右揃えのflex「flex-end」

.flex {
  display: flex;
  justify-content: flex-end;
}

• １
• ２
• ３

左端にピタっとくっついた左揃えのflex「flex-start」(デフォルト)

.flex {
  display: flex;
  justify-content: flex-start;
}

• １
• ２
• ３

要素を横並びにしたら次は、「flex-wrap」で個数を指定して折り返して
2行、3行にしていくよ！
「display: flex」だけだと1行で横幅がイイ感じにならない！
だから「flex-wrap」で1個1個の横幅を決めて折り返すよ。
基本HTMLのリストの数を増やします！

基本HTML２

<ul class="flex">
  <li>１</li>
  <li>２</li>
  <li>３</li>
  <li>４</li>
  <li>５</li>
  <li>６</li>
</ul>

２つで折り返して複数行にする

.flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.flex li {
  display: block;
  width: 50%;
  margin: 10px 0;
}

• １
• ２
• ３
• ４
• ５
• ６

３つで折り返して複数行にする

横並びの数を決めるには、2個で折り返したい時は３３.４～５０までの数で
3個で折り返したい時は２６～３３.３までの数。
これは１００％を２つに分割すると５０％になって、３つに分割する時は「33.3333333333….%」になるから
割り算が得意な人は簡単に理解できちゃう。
でも、１００％を３で分割したい時「33.3333333333….%」になって割り切れないし、「.33333」を書くの滅茶苦茶嫌だ。
そんな時は、CSSで計算できる「calc」を使うと良いよ！
使い方は下の通り。

.flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.flex li {
  display: block;
  width: calc(100%/3);
  margin: 10px 0;
}

• １
• ２
• ３
• ４
• ５
• ６

３で分割するときは「calc」の計算式を使うんだけど
もう、全部計算するのめんどくさいから全部「calc」で書いちゃうと楽ちん。

４つで折り返して複数行にする

色々踏まえて４つで折り返すときは、１１～２５までの数字なら４つで折り返せる。
けど計算の手間を省くため「calc」を使って書いてみるよ！

.flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.flex li {
  display: block;
  width: calc(100%/4);
  margin: 10px 0;
}

2行目が２つしか数字が無いから変な感じになってる。

• １
• ２
• ３
• ４
• ５
• ６

これで、さらに要素間に余白を入れてよくある感じにするよ！
余白を入れる場合は、１００％から分割するんじゃなく余白を考えて分割しよう！
例えば３列の表を作って間に２％の余白を空ける場合は「calc(96%/3)」になる。
２列で５％の余白を空ける場合は「cac(95%/2)」になるね！

余白を空けて３列で表を作る

.flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.flex li {
  display: block;
  width: calc(96%/3);
  margin: 10px 0;
}

• １
• ２
• ３
• ４
• ５
• ６

こんな風に「li」の数値を変更するだけで色んな表現を可能にする「flex」をぜひ使ってみてね！
僕もこのブログをコピペしながらサイト作ってるから、「flex」の使い方全然覚えられてないw