【CSS】flexをレイアウトで使ってみよう【flex編その２】

2022年6月15日 07:13

flexを並べる方法を学習したので、次はflexを使ったレイアウトを考えてみましょう。近年レイアウトを作る場合はgridを使うのが主流になっていますが、flexも一時期はレイアウトを作るCSSとして活躍していました。今でも場合によってはflexを使ったほうが良いレイアウトもありますので、その点も含めて作ってみたいと思います。

flexはレイアウトの補助をするために使う

flexだけで全部レイアウトを組んでいた時期もありますが、現在ではgridレイアウトが主流になっているため、今頃flexでレイアウトを組むことは無いと思います。あるとしても、昔作られたサイトのメンテナンス用途だと思います。その位今はレイアウトを作る用途での使い道は無いです。

ですが、flexにも強みがあります。その強みを生かしてレイアウトの補助を行っていきます。

上下左右全部の中央揃えを行う

<div class="flex">
  <p>この文字は中央に配置されます</p>
</div>

.flex {
  border:1px solid #333;
  box-sizing: border-box;
  display:flex;
  justify-content:center;
  align-items: center;
  margin:0;
  padding:30px;
  height:300px;
}
.flex p {
  text-align:center;
  border:1px dotted #ccc;
}

多分現在、flexで一番使われる方法だと思います。
flexは左右の中央揃え以外にも、上下の中央揃えを行うことが可能です、この上下の中央揃えが出来る事で、テキストの配置等が格段にやりやすくなります。
画像の真ん中にロゴを置きたい場合、キャッチコピーを置く場合、その他いろいろな用途でこの中央揃えを始めとした配置方法は役に立つと思います。

左右の端に置く

一般的なサイトのヘッダーなど、左にヘッダーロゴ、右にメニューなどを置く場合に左右に表示するものを振り分ける場合に使用します。

<div class="flex">
  <h1>ヘッダー</h1>
  <ul>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
  </ul>
</div>

.flex {
  border:1px solid #333;
  box-sizing: border-box;
  display:flex;
  justify-content:space-between;
  align-items: center;
  margin:0;
  padding:0 30px;
  height:100px;
}
.flex ul {
  display:flex;
  justify-content: right;
  list-style: none;
  gap:30px;
}

左右に振り分ける用途の場合、左右が狭くなって左右がぶつかってしまう場合は別途レスポンシブの処理を入れることが前提となります。

おまけ

flexでタイルレイアウトをやりたい場合はこんな感じになります。

<ul class="flex">
  <li><img src="./img/test.png" alt="test"></li>
  <li><img src="./img/test.png" alt="test"></li>
  <li><img src="./img/test.png" alt="test"></li>
  <li><img src="./img/test.png" alt="test"></li>
  <li><img src="./img/test.png" alt="test"></li>
</ul>

space-betweenを使うタイプはこんな感じでCSSを組みます。

.flex {
  box-sizing: border-box;
  list-style:none;
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
  row-gap:10px;
  margin:0;
  padding:30px;
}
.flex::before, .flex::after {
  content:"";
  display:block;
  height:0;
  width:25%;
  order:2;
}
.flex li {
  position:relative;
  width:24%;
  overflow:hidden;
}
.flex li:before {
  content:"";
  display:block;
  padding-top:100%;
}
.flex li img {
  position:absolute;
  top:0;
  left:0;
  object-fit:cover;
  object-position:center center;
  width:100%;
  height:100%;
}

flexを左揃えで配置する場合はこんな感じでCSSを組みます。

.flex {
  box-sizing: border-box;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  row-gap:10px;
  margin:0;
  padding:30px;
}
.flex li {
  position:relative;
  width:24%;
  overflow:hidden;
}
.flex li + li {
  margin-left:1.33%;
}
.flex li:nth-child(4n) +li {
  margin-left:0;
}
.flex li:before {
  content:"";
  display:block;
  padding-top:100%;
}
.flex li img {
  position:absolute;
  top:0;
  left:0;
  object-fit:cover;
  object-position:center center;
  width:100%;
  height:100%;
}

とりあえず、flex時代は2種類の方法があったので両方書いてみました。
どちらも正直めんどくさいです。space-betweenタイプは比較的簡単なのですが、4列以上並べることが出来ません。
左から揃えれば5列以上に対応できますが、一番右に来た画像にmargin-left:0のCSSを組み込む必要があるので、レスポンシブさせる場合面倒なことになってきます。
やってみてこんな事を言うのはなんですが、こういう用途はやっぱりgridが一番です。grid素敵！grid最高！

ちなみに、こっそりとどんな画像でも正方形で配置する技を組み込んでいます。これも後日小ネタとしてさらっと書いてみます。

まとめ

学習してみたのですが、やっぱりflexはgridの補助で使うのが一番手っ取り早いと思いました。
flexも「flex-basis」「flex-grow」「flex-shrink」と言ったflexの要素自体を調整するCSSもあるのですが、実際使うと結構微妙でこれだ！って言う使い方を思いついたら改めてご紹介したいと思います。
とりあえず上下左右揃えだけ覚えていただけたらいいかなと思います。

このような感じで、日々色々な事が出来るようにがんばっております。
もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！

この記事が気に入ったらサポートをしてみませんか？