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

この記事は約5分で読めます。

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

基本HTML1

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</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のリストの数を増やします!

基本HTML2

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

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

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

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

横並びの数を決めるには、2個で折り返したい時は33.4~50までの数で
3個で折り返したい時は26~33.3までの数。
これは100%を2つに分割すると50%になって、3つに分割する時は「33.3333333333….%」になるから
割り算が得意な人は簡単に理解できちゃう。
でも、100%を3で分割したい時「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;
}

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

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

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

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

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

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

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

.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

CSS

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました