問題 × 解決策

汎用性がとても高い!「flexbox」の使用方法のご紹介

問題

「flexbox」の基本的な使い方がわからない。

解決策

親要素に「display: flex;」を設定することで、子要素に様々な設定を行える。

 

横並びの新しい手法「flexbox」

要素を横並びにする手法として、「float」「inline-block」が主流でしたが、「flexbox」の普及により、こちらが主流となってきているように思います。
今回は「flexbox」の基本的な使用例をいくつかご紹介します。

  • 子要素には、以下のCSSを設定しています。
.flexbox-item{
	margin: 0;
	padding: 15px;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.flex-item:nth-child(odd){
	background-color: #fff2ee;
}
.flex-item:nth-child(even){
	background-color: #FCECE8;
}
.flexbox-item:last-child{
	border-right: none;
}

基本の状態

親要素に「display: flex;」を設定したのみの状態です。

デフォルトで子要素が横並びになります。

DEMOはこちら

テキスト
テキスト
テキスト
HTML
<div class="flexbox-sample01">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>
CSS
.flexbox-sample01{
	display: -webkit-flex;
	display: flex;
}

両端を除いた余白(スペース)の均等化

親要素に「justify-content: space-between;」を設定することで、両端を除いた均等な余白を空けて子要素が配置されます。

DEMOはこちら

テキスト
テキスト
テキスト
HTML
<div class="flexbox-sample02">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>
CSS
.flexbox-sample02{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

両端を含めた余白(スペース)の均等化

親要素に「justify-content: space-around;」を設定することで、両端を含めた均等な余白を空けて子要素が配置されます。

DEMOはこちら

テキスト
テキスト
テキスト
HTML
<div class="flexbox-sample03">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>
CSS
.flexbox-sample03{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

子要素の幅の可変 – 隙間が埋まるように幅が伸びてくれます

子要素に「flex-grow: 1;」を設定することで、親要素に隙間のできないように幅が伸びてくれます。

DEMOはこちら

テキスト
テキスト
テキスト
HTML
<div class="flexbox-sample04">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>
CSS
.flexbox-sample04{
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.flexbox-sample04 .flexbox-item{
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

高さを揃える

親要素に「align-items: stretch;」を設定することで、子要素が高さを揃えてくれます。

DEMOはこちら

テキスト
テキスト
テキスト
テキスト
HTML
<div class="flexbox-sample05">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト<br>テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>
CSS
.flexbox-sample05{
	display: -webkit-flex;
	display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.flexbox-sample05 .flexbox-item{
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

折り返し+幅の補完

親要素に「 flex-wrap: wrap; 」を設定することで、子要素が親要素の幅を超える場合、下へ折り返します。これと同時に子要素に「flex-grow: 1;」を設定することで、折り返した要素が幅を補完してくれます。

DEMOはこちら

テキスト
テキスト
テキスト
HTML
<div class="flexbox-sample06">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>
CSS
.flexbox-sample06{
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flexbox-sample06 .flexbox-item{
    -webkit-flex-grow: 1;
    flex-grow: 1;
    width: 50%;
}

幅の固定+可変

子要素のいずれに「flex-basis: 幅の数値指定;」を設定することで、その数値に固定されます。
これと同時に他の子要素に「flex-grow: 1;」を設定することで、幅固定と幅可変の2種類の要素を扱うことが可能となります。

DEMOはこちら

テキスト
テキスト
テキスト
HTML
<div class="flexbox-sample07">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>
CSS
.flexbox-sample07{
	display: -webkit-flex;
	display: flex;
}
.flexbox-sample07 .flexbox-item:first-child {
    -webkit-flex-basis: 50px;
    flex-basis: 50px;
}
.flexbox-sample07 .flexbox-item:not(:first-child){
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

PCとスマートフォンでの使い分け

⑥の手法を利用し、PCでは幅25%で4つ並び、スマートフォンでは幅50%で2つ並びにレイアウトを使い分けることができます。

DEMOはこちら

テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
HTML
<div class="flexbox-sample08">
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
	<div class="flexbox-item">テキスト</div>
</div>
CSS
@media print, all and (min-width: 768px) {
	.flexbox-sample08{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.flexbox-sample08 .flexbox-item{
		-webkit-flex-grow: 1;
		flex-grow: 1;
		width: 25%;
	}
}
@media only screen and (max-width: 767px) {
	.flexbox-sample08{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.flexbox-sample08 .flexbox-item{
		-webkit-flex-grow: 1;
		flex-grow: 1;
		width: 50%;
	}
}

参考

【CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]】
https://mamewaza.com/support/blog/howto-use-flex.html

【もう迷わない!CSS Flexboxの使い方を徹底解説 | Web Design Trends】
https://webdesign-trends.net/entry/8148

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

5 × 2 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧