【CSS】制作現場でよく使うFlexbox使用例

横並びや、上下左右の中央揃えなど、要素の配置をフレキシブルに行えるflexbox。
多くのプロパティがありますが、下記のようなWEBサイトを例に、個人的に現場でよく使うflexboxの使用例を紹介します。

＜参考サイト＞

1.ヘッダーレイアウト

ロゴとメニューを両端揃えで横に並べ、メニューはロゴの高さに対して天地中央に配置します。

▼実装サンプル
HTML

<header>
	<div class="logo">ロゴ</div>
	<nav>
		<ul>
			<li><a href="">メニュー1</a></li>
			<li><a href="">メニュー2</a></li>
			<li><a href="">メニュー3</a></li>
			<li><a href="">メニュー4</a></li>
			<li><a href="">メニュー5</a></li>
			<li><a href="">メニュー6</a></li>
		</ul>
	</nav>
</header>

CSS　※装飾のcssは省略しています

header {
	display: flex;/*ロゴとメニューを横に並べる*/
	justify-content: space-between;/*両端に配置*/
	align-items: center;/*上下中央揃えに配置*/
}
nav ul {
	display: flex;/*メニューを横に並べる*/
}

2.要素の順序を入れ替える

PCで見たときは、画像とテキストを横に配置、SPで見たときは、テキストの上に画像を配置します。

<PCでの見え方>

<スマホでの見え方>

flex-directionプロパティを使用し、column-reverseを指定して、子要素の並びを縦にし並ぶ方向を逆にします。

▼実装サンプル
HTML

<div class="img-text">
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<figure><img src =""></figure>
</div>

CSS　※装飾のcssは省略しています

.img-text {
   display: flex;/*画像とテキストを横並び*/
   justify-content: space-between;/*両端に配置*/
   align-items: center;/*上下中央揃えに配置*/
}
/*スマホでの表示*/
@media all and (max-width: 767px) {
     .img-text {
       flex-direction: column-reverse;/*縦並びにし、逆方向にする*/
     }
}

3.テキストの左右いっぱいにラインを引く

この場合もflexを使用します。

​

4.横並びにし中央に寄せる

HTML

<ul class="list-img-text">
  <li>
     <img src ="">
     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
  <li>
     <img src ="">
     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
  <li>
     <img src ="">
     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
</ul>

CSS　※装飾のcssは省略しています

.list-img-text　{
  display: flex;/*横並びにする*/
  justify-content: center;/*中央に寄せる*/
  align-items: center;/*上下中央揃えに配置*/
  gap: 5%;/*flexアイテム間の余白指定*/
}

.list-img-text li　{
  width: 30%;
  text-align: center;
}

.list-img-text li img　{
 display: inline-block;
}

5.横並びアイテムを折り返す

HTML

<ul class="list-text">
  <li>
     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
 <li>
     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
 <li>
     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
   <li>
     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
   <li>
     <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </li>
</ul>

CSS

.list-text {
  display: flex;/*横並びにする*/
  flex-wrap: wrap;/*flexアイテムを折り返す*/
  gap: 5%;/*flexアイテム間の余白指定*/
}

.list-text li {
  width: 30%;
}