もうfloatは使わない？新定番Flexboxの使い方を徹底解説！

おはようございます！社員Aです👩

横並びレイアウトで定番だったcssのfloatから、今はFlexboxが主流になりつつあるので今回はFlexboxの使い方を徹底解説します。

 

Flexboxとは?

そもそもFlexboxとは何かという話なのですが、FlexboxとはFlexible Box Layout Moduleのことで、フレキシブルで簡単にレイアウトが組めるCSS3のプロパティです。

いままでは、「float」「inline-block」などで横並びレイアウトを実装するのが主流でしたが、cleafixでの解除や縦方向の中央揃えなどが面倒でした。

そこで、もっと柔軟で簡単な手法が「Flexbox」になります。

 

対応ブラウザ

引用:https://caniuse.com/#search=flexbox

2018年11月現在の結果ですが、ほぼ全てのブラウザで対応しています。

今までは対応していないブラウザもあり、Flexboxの使用を躊躇している方も多かったと思いますが、これで気軽に使えそうです。

 

Flexboxを使うメリット

今までFloatやinline-blockで横並びしていた時には実現できなかった、Flexboxならではの特徴があります。

1. 高さを自動的に調整してくれる
2. 自由に表示順序を変えられる
3. 余白の指定がカンタンにできる

このため、Floatやinline-blockを使うよりもレスポンシブ対応も容易になります。

 

Flexboxの使い方（親要素編）

Flexboxは親要素と子要素に指定できるものがあります。

ここからは、親要素に指定できるものをご紹介します。

 

1.要素を横並びにする

まずは、Flexboxの基本でもある要素を横並びにする方法です。

Flexboxを使用する際は、横並びにしたい要素と、それを囲う要素が必要になります。

<div class="flex_wrap">
	<div>test1</div>
	<div>test2</div>
	<div>test3</div>
	<div>test4</div>
</div>

上記のソース例で言うと、横並びにしたい要素divを親要素「flex_wrap」で囲みます。

そして、CSSで下記の指定をするだけです。

.flex_wrap{
	display: flex;
}

親要素に対して、display:flexを使うことで子要素を横並びにすることができます。

 

 

2.縦の揃えを変更できる「align-items」

align-itemsプロパティは、コンテナ内のアイテムの縦方向（交差軸方向）のデフォルト揃え位置を指定する際に使用します。

◆HTML

<div class="flex_wrap">
	<div>test1</div>
	<div>test2</div>
	<div>test3</div>
	<div>test4</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	align-items:stretch;
	background:#eee;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:18%;
	margin:10px;
}

 

◆指定できる値

 

3.横の揃えを変更できる「justify-content」

justify-contentプロパティは、コンテナ内全体の横方向（主軸方向）の揃え位置を指定する際に使用します。

align-contentプロパティの横方向版ですね。

◆HTML

<div class="flex_wrap">
	<div>test1</div>
	<div>test2</div>
	<div>test3</div>
	<div>test4</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	justify-content:center;
	background:#eee;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:18%;
	margin:10px;
}

 

◆指定できる値

 

 

4.縦の揃えを変更できる「flex-direction」

flex-directionプロパティは、フレックスコンテナ内のアイテムの配置方向を指定する際に使用します。

具体的には、フレックスコンテナの主軸方向を設定することで、フレックスアイテムがレイアウトされる方向を決定します。

◆HTML

<div class="flex_wrap">
	<div>test1</div>
	<div>test2</div>
	<div>test3</div>
	<div>test4</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	flex-direction:row;
	background:#eee;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:18%;
	margin:10px;
}

 

◆指定できる値

 

 

5.折り返しを変更できる「flex-wrap」

flex-wrapプロパティは、フレックスコンテナ内のアイテムの折り返し方法を指定する際に使用します。

フレックスアイテムの折り返しの有無、折り返す場合の折り返し行の積み上げ方向を指定できます。

◆HTML

<div class="flex_wrap">
	<div>test1</div>
	<div>test2</div>
	<div>test3</div>
	<div>test4</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
    flex-wrap: wrap; 
	background:#eee;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:30%;
	margin:10px;
}

 

◆指定できる値

 

 

6.複数行の揃えを変更「align-content」

align-contentプロパティは、コンテナ内全体の縦方向（交差軸方向）の揃え位置を指定する際に使用します。

◆HTML

<div class="flex_wrap">
	<div>test1</div>
	<div>test2</div>
	<div>test3</div>
	<div>test4</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	flex-wrap: wrap;  
	align-content:stretch; 
	height:250px;
	background:#eee;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:40%;
	margin:10px;
}

 

◆指定できる値

 

Flexboxの使い方（子要素編）

Flexboxは親要素と子要素に指定できるものがあります。

ここからは、子要素に指定できるものをご紹介します。

 

1.要素の並び順を調整できる「order」

orderプロパティは、フレックスコンテナ内のアイテムの表示順序を指定する際に使用します。

フレックスアイテムは、デフォルトではソースに記述されている順序と同じ順序で表示されます。

orderプロパティを使用するとこの表示順序を変更できます。

◆HTML

<div class="flex_wrap">
	<div>test1</div>
	<div>test2</div>
	<div>test3</div>
	<div>test4</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	background:#eee;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:40%;
	margin:10px;
}
.flex_wrap div:nth-of-type(1){
	order:3;
}
.flex_wrap div:nth-of-type(2){
	order:1;
}
.flex_wrap div:nth-of-type(3){
	order:4;
}
.flex_wrap div:nth-of-type(4){
	order:2;
}

orderで指定した数字の小さい順に表示されます。

 

 

2.要素の幅を広げられる「flex-grow」

flex-growプロパティは、フレックスコンテナ内のアイテムの伸び方の比率を指定する際に使用します。

flex-growプロパティでは、各フレックスアイテムの伸び方の比率を、正の数値で相対的に指定します。 flex-growプロパティの値に、負の数値は指定できません。

◆HTML

<div class="flex_wrap">
	<div>test1</div>
	<div>test2</div>
	<div>test3</div>
	<div>test4</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	background:#eee;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:40%;
	margin:10px;
}
.flex_wrap div:nth-of-type(1){
	order:3;
}
.flex_wrap div:nth-of-type(2){
	flex-grow: 1;
	order:1;
}
.flex_wrap div:nth-of-type(3){
	order:4;
}
.flex_wrap div:nth-of-type(4){
	order:2;
}

 

3.要素の幅を縮ませられる「flex-shrink」

flex-shrinkプロパティは、フレックスコンテナ内のアイテムの縮み方の比率を指定する際に使用します。

指定した数値が大きいほど幅が大きくなります。

◆HTML

<div class="flex_wrap">
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	background:#eee;
	flex-wrap: nowrap;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:40%;
	margin:10px;
}
.flex_wrap div:nth-of-type(1){
	flex-shrink: 1;
}
.flex_wrap div:nth-of-type(2){
	flex-shrink: 2;
}
.flex_wrap div:nth-of-type(3){
	flex-shrink: 3;
}
.flex_wrap div:nth-of-type(4){
	flex-shrink: 4;
}

 

 

4.要素の大きさを単位指定できる「flex-basis」

flex-basisプロパティは、フレックスコンテナ内のアイテムの基本幅を指定する際に使用します。

必ず指定した幅で表示されるわけではなく、他の指定との兼ね合いでフレックスコンテナ内におさまるように自動調整されます。

◆HTML

<div class="flex_wrap">
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	background:#eee;
	flex-wrap: nowrap;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:40%;
	margin:10px;
}
.flex_wrap div:nth-of-type(1){
	flex-basis:  250px;
}

 

 

5.要素の大きさを調整を一括指定できる「flex」

flexプロパティは、フレックスコンテナ内のアイテムの幅についてまとめて指定する際に使用します。

flex-growプロパティ・ flex-shrinkプロパティ・ flex-basisプロパティ の値を、flexプロパティ一つでまとめて指定できるので便利です。

◆CSS

.test{
	flex:flex-growの値 flex-shrinkの値 flex-basisの値;
}

 

6.縦の揃えを子要素ごとに変更できる「align-self」

align-selfプロパティは、コンテナ内の個別アイテムの縦方向（交差軸方向）の揃え位置を指定する際に使用します。

アイテムの縦方向のマージンのいずれかがautoに指定されている場合、align-selfプロパティの指定は無効となります。

◆HTML

<div class="flex_wrap">
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
	<div>てきすとてきすとてきすとてきすとてきすとてきすとてきすと</div>
</div>

 

◆CSS

.flex_wrap{
	display: flex;
	background:#eee;
}
.flex_wrap div{
	background:#fff;
	text-align:center;
	padding:15px 0;
	width:40%;
	margin:10px;
	align-self: stretch;
	width:23%;
}

 

◆指定できる値

 

まとめ

Flexboxは手軽に横並びが実装できるCSSとして主流になっています。

カスタマイズ性も高いので、各機能を覚えるまでが大変ですがこのブログをブクマしていただいて、使う時に見ていただけたら嬉しいです！