• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

Flexible Boxについて(flexコンテナー編)

投稿者アイコン
2019/07/22
書いた人:
rurippa!
カテゴリ:
CSS
283 views

Flexible Boxの使い方をまとめます。今回は「flexコンテナー」に指定するプロパティを紹介します。

Flexible Boxについて(flexコンテナー編)

簡単に横並びや、中央寄せができたり。便利なプロパティがたくさんあるので、振り返るのにも役立つようにまとめてみます!

目次

ベースのHTML

今回はul、liを使って紹介します。他のタグでももちろんOKです。

		<ul class="sample">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		
  • 1
  • 2
  • 3
  • 4
  • 5

display: flex;

親要素に指定するだけで、中にある子要素が横並びになります。

display: flex;を親要素に書くことで、親要素に当たる部分(今回ならul)が「flexコンテナー」、その中にある子要素(今回はli)が「flexアイテム」となります。ざっくり名前だけでも覚えておくと良いと思います。

flex_img01

  • 1
  • 2
  • 3
  • 4
  • 5
		.sample {
			display: flex;
		}
		
		/*インライン要素に使う場合は、こちらを指定します。*/
		.sample {
			display: inline-flex;
		}
		

flex-direction

「flex-direction」は、flexアイテムが並ぶ方向を指定できます。たて・よこ方向があります。

row

左から右へ(初期値)

		.sample {
			display: flex;
			flex-direction: row;
		}
		
  • 1
  • 2
  • 3
  • 4
  • 5

row-reverse

右から左へ

		.sample {
			display: flex;
			flex-direction: row-reverse;
		}
		
  • 1
  • 2
  • 3
  • 4
  • 5

column

上から下へ

		.sample {
			display: flex;
			flex-direction: column;
		}
		
  • 1
  • 2
  • 3
  • 4
  • 5

column-reverse

下から上へ

		.sample {
			display: flex;
			flex-direction: column-reverse;
		}
		
  • 1
  • 2
  • 3
  • 4
  • 5

flex-wrap

「flex-wrap」は、1行で並んでいるflexアイテムの折り返しの有無と、並ぶ方向を指定できます。

nowrap

折り返ししない(初期値)

				.sample {
					display: flex;
					flex-wrap: nowrap;
				}
				
  • 1
  • 2
  • 3
  • 4
  • 5

wrap

折り返しをする

				.sample {
					display: flex;
					flex-wrap: wrap;
				}
				
  • 1
  • 2
  • 3
  • 4
  • 5

wrap-reverse

下から上方向に、折り返しをする

				.sample {
					display: flex;
					flex-wrap: wrap-reverse;
				}
				
  • 1
  • 2
  • 3
  • 4
  • 5

flex-flow

「flex-direction」と「flex-wrap」をまとめて指定できるショートハンドです。
flex-flow:のあとに、flex-directionの値 半角スペース flex-wrapの値の順に指定します。

flex-flow: (flex-direction)(flex-wrap);

初期値は「row nowrap」です。

.sample {
	display: flex;
	flex-flow: row-reverse wrap;
}
  • 1
  • 2
  • 3
  • 4
  • 5

justify-content

水平方向の揃え方の指定ができます。

flex-start

flexアイテムが左寄せで並びます。flex-startが初期値です。

.sample {
	display: flex;
	justify-content: flex-start;
}
  • 1
  • 2
  • 3
  • 4
  • 5

flex-end

flexアイテムが下寄せで並びます。

.sample {
	display: flex;
	justify-content: flex-end;
}
  • 1
  • 2
  • 3
  • 4
  • 5

center

flexアイテムが中央寄せで並びます。

.sample {
	display: flex;
	justify-content: center;
}
  • 1
  • 2
  • 3
  • 4
  • 5

space-between

flexアイテムの最初と最後を両端に配置し、残りの要素は均等に間をあけて配置する。

.sample {
	display: flex;
	justify-content: space-between;
}
  • 1
  • 2
  • 3
  • 4
  • 5

space-around

flexアイテムを全て均等に配置する。space-betweenとの違いは、最初と最後の要素の両側にも均等にスペースが入ります。

.sample {
	display: flex;
	justify-content: space-around;
}
  • 1
  • 2
  • 3
  • 4
  • 5

align-items

垂直方向の揃え方の指定ができます。

stretch

初期値になります。flexアイテムの一番高い要素に合わせて 他のflexアイテムも高さが伸びるため、便利です。

.sample {
	display: flex;
	align-items: stretch;
}
  • 1
  • 2
  • 3
  • 4
  • 5

flex-start

垂直方向に上寄せで配置します。

.sample {
	display: flex;
	align-items: flex-start;
}
  • 1
  • 2
  • 3
  • 4
  • 5

flex-end

垂直方向に下側に配置します。

.sample {
	display: flex;
	align-items: flex-end;
}
  • 1
  • 2
  • 3
  • 4
  • 5

center

垂直方向に中央に配置します。

.sample {
	display: flex;
	align-items: center;
}
  • 1
  • 2
  • 3
  • 4
  • 5

baseline

flexアイテムのベースラインで揃えます。
※わかりやすくするため、それぞれ文字サイズを変えています。

.sample {
	display: flex;
	align-items: baseline;
}
  • 1
  • 2
  • 3
  • 4
  • 5

align-content

flexアイテムが複数行あるとき、垂直方向の揃え方の指定ができます。

stretch

初期値になります。flexアイテムの一番高い要素に合わせて 他のflexアイテムも高さが伸びるため、便利です。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
}
  • 1
  • 2
  • 3
  • 4
  • 5

flex-start

垂直方向に上寄せで配置します。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

flex-end

垂直方向に下側に配置します。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

center

垂直方向に中央に配置します。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

space-between

flexアイテムの最初と最後を上下両端に配置し、残りの要素は均等に行間をあけて配置する。

.sample {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

space-around

flexアイテムを全て均等に配置する。space-betweenとの違いは、最初と最後の要素の上下にも均等にスペースが入ります。

.sample {
	display: flex;
	flex-wrap: wrap;
 	align-content: center;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

まとめ

いかがでしたか?
使い慣れるまで、どのプロパティだっけ?となるかもしれませんが・・、まずはよく使うものから覚えていけると良いと思います。フレックスボックスは便利な使い方が色々できるので、頑張って覚えていきましょー♪


この記事を読んだ人はこんな記事も読んでいます