MENU
はにわまんの技術ブログ
お問い合わせ
  1. ホーム
  2. CSS
  3. 【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！

【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！

CSS

Flexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最初のころはFlexboxのプロパティを試していましたが、実際に使うようになって「あれ、ほとんどのプロパティは使わなくて実装できるよね？」ってなりました。

もちろん全部を使いこなせるに越したことはないですが、まずは使うところから覚えるのが勉強の王道だと思います。

この記事では、現役コーダーのわたしが実際によく使うFlexboxのパターンを5つ厳選しました。これから勉強する方は、まずはこの5パターンから覚えていくことをおすすめします！

はにわまん

Flexboxで使うところだけ紹介するよー！

Flexboxで覚えるべき5パターン

以前ツイートしたのですが、普段コーディングを仕事にしていても、ほぼこの3パターンで足ります（どんだけ簡単なコーディングしているだ！ってツッコミは禁止）

今回は、この3パターンに2パターン加えました。おそらくシンプルなLPや一般的な大抵のWebサイトはこの5パターンだけを覚えておけば問題なくコーディングできると思います！

０、基本となるボックスを用意

まずは、基本となるボックスを用意しました。このボックスをFlexboxで並び替えていきます。ご自身の環境で試す際は、下記のコードを１～４までのコードにプラスして適応させてください！

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="item">
	<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy.jpg" alt=""></div>
	<div class="item-body">
		<div class="item-title">見出し見出し見出し見出し</div>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
</div><!-- /.item -->
.item {
  width: 100%;
}
.item-img {
  padding: 0;
}
.item-body {
  padding: 0;
}
.item-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #ef5350;
}
.item-body p {
  font-size: 16px;
  font-weight: 400;
  color: #333;
}

１、左右をピッタリで等間隔

「両端は端っこにくっつけて間は均等にする」という指定になります。これは本当によく使います。横並びのベースとして、ここから上書きしていく感じでつかうことが多いです。

覚えるプロパティとしては、justify-content: space-between;です！

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="items">
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy2.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy3.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
</div><!-- /.items -->
.items {
  display: flex;
  justify-content: space-between;
}
.items .item {
  width: 30%;
}

２、横並びから縦並びに変更

レスポンシブデザイン時によく使うやりかたです。Flexboxは並びの向きを指定できます。row（横並び）が一般的だと思いますが、columnで縦並びにもできます。

PCサイトからスマホサイトへ変換させるときに　rowとcolumnを使い分けていい感じにレスポンシブ対応させてあげてください！

覚えるプロパティとしては、flex-direction: column;です。

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="items2">
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy2.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy3.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
</div><!-- /.items2 -->
.items2 {
  display: flex;
  flex-direction: column;
}

.items2 .item {
  width: 100%;
}

記事ではどの環境でも動くように.items2とクラスを分けていますが、実際は１のコードにメディアクエリでflex-directionを追加する感じです。

@media screen and (max-width: 767px) {
	.items {
		flex-direction: column;
	}
	.items .item {
		width: 100%;
	}
}

３、折返し

実はFlexboxはデフォルトでは改行されません。display: table-cellみたいなイメージをしていいただければ理解しやすいかもしれません。横幅をあふれるように指定しても、Flexboxが横幅をいい感じに調整しちゃいます…（無駄に賢い）

なので、改行させたい場合はプロパティを新たに追加してあげる必要あります。

覚えるプロパティはflex-wrap: wrap;です。

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="items3">
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy2.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy3.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy4.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy5.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
	<div class="item">
		<div class="item-img"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/10/dummy6.jpg" alt=""></div>
		<div class="item-body">
			<div class="item-title">見出し見出し見出し見出し</div>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</div><!-- /.item -->
</div><!-- /.items3 -->
.items3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.items3 .item {
  width: 30%;
}

ちなみに、flex-wrap: wrap;を指定しないと以下のような表示になります。幅の指定関係なく横幅に無理やり1列で収めようとするのがFlexboxです。

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

４、順番を入れ替える

互い違いのレイアウトもフレックスボックスはめっちゃ楽です。２のFlexboxで並べる向きの話をしましたが、逆向きという指定も存在します。なので、奇数だけ逆向きみたいな指定をすれば、簡単に互い違いにすることが可能です！

こんな感じです。LPとかでよくあるかと思います。

覚えるプロパティは、flex-direction: row-reverse;です。

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.items4 .item {
  display: flex;
  margin: 0 0 24px;
}
.items4 .item:nth-child(odd) {
  flex-direction: row-reverse;
}
.items4 .item-img {
  width: 50%;
  padding: 0 12px;
}

ちなみに、columnにも逆向きの指定（flex-direction: column-reverse;）ができるので、サイドメニューをスマホ表示時に上にするか下に配置するかは、flex-directionを使えば柔軟に変更可能です！

クライアント「スマホ時はサイドメニューを上にしたいんだけど」
わたし「おやすい御用です！」

５、上下を中央にそろえる

個人的には、ヘッダーでよく使っているかと思います。なので、さっきまでの記事一覧風のレイアウトから、ヘッダー風で紹介していきます。

高さが指定してある要素にdisplay: flex;を指定して、align-items: center;にすると、flexのアイテムが上下の中央に配置されます。

覚えるプロパティは、align-items: center;です。

<div class="items5">
	<div class="item-logo"><a href="">ロゴ</a></div>
	<nav class="item-nav">
		<ul>
			<li><a href="">Top</a></li>
			<li><a href="">About</a></li>
			<li><a class="active" href="">Blog</a></li>
			<li><a href="">Profile</a></li>
			<li><a href="">Contact</a></li>
		</ul>
	</nav><!-- /.item-nav -->
</div><!-- /.items5 -->
.items5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.16);
  padding: 0 24px;
}
.item-logo > a {
  text-decoration: none;
  color: #333;
}
.item-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.item-nav li {
  display: inline-block;
  padding: 0 12px;
}
.item-nav a {
  text-decoration: none;
  color: #333333;
}
.item-nav a.active, .item-nav a:hover {
  border-bottom: 3px solid #ef5350;
}

おわり

細かいFlexboxの説明は抜きにして、実際に使いがちなFlexboxのパターンだけを紹介しました。普段コーディングしていてもほぼこの5パターンだけで足りています。

勉強するときは、まず実際に動くところから、あるいは実践的に使うところからが王道だと思います。これからFlexboxを勉強しようと考えている方は、まずは今回紹介した5パターンを覚えるところから始めてみてください！

（PCで見る前提の記事なので、スマホで見るのが怖い笑）

CSS

この記事が気に入ったら
いいね または フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

はにわまんのアバター はにわまん

WordPressが得意なWeb屋。HPcode代表。

300件以上のWordPressカスタマイズを対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。

関連記事