【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

SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
スポンサーリンク
初めてのブログ

コメント

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