【CSS】flexboxの基本（親要素）

   

レッスン

CSS flexbox（フレックスボックス）は、CSSでレイアウトをする際に現在一番よく利用されているレイアウトモジュールです。ここでは、flexboxの親要素のプロパティを説明していきます。

flexboxをする前の状態

flexboxは親要素と子要素の2つの要素によって構成されます。親要素と子要素それぞれ下のクラスを用意しました。flexboxをまだ設定していない状態が下です。

※数字を真ん中に表示させるCSSはCSSの見栄えが複雑になってしまうため割愛しています。

※レイアウト状況が分かるようにメディアクエリで.boxのサイズを変更しています。

HTML
<div class="flex-box">
  <div class="box"><span>1</span></div>
  <div class="box"><span>2</span></div>
  <div class="box"><span>3</span></div>
</div>
CSS
.flex-box{
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.box{
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}
 
@media only screen and (max-width:640px) {
	.box{
		width:75px;
		height:75px;
	}
}
 
@media only screen and (max-width:480px) {
	.box{
		width:50px;
		height:50px;
	}
}
1
2
3


親要素にdisplay:flexを指定

親要素である.flex-boxにCSS display:flexを指定すると横並びになる。

display:flexを指定すると、下記初期値で設置される

親要素に指定できるCSSプロパティつまり、flex-direction、flex-wrap等のすべての初期値が事前に設定されているため、display:flexと指定しただけで横並びになる。

親要素の初期値

  • flex-direction:row;
  • flex-wrap:nowrap;
  • justify-content:flex-start;
  • align-items:stretch;
  • align-content:stretch;

子要素の初期値

  • order:0;
  • flex-grow:1;
  • flex-shrink:1;
  • flex-basis:auto;
  • align-self:auto;

flexboxにおける子要素のプロパティ一覧は次のページを参照。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3


親要素に指定できるCSSプロパティ一覧

flex-direction「並び方の方向」

  • row（横並び ※初期値）
  • row-reverse（横並び逆方向）
  • column（縦並び）
  • column-reverse （縦並び逆方向）

flex-direction:row（横並び ※初期値）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*横並び ※初期値*/
	flex-direction:row;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3

flex-direction:row-reverse（横並び逆方向）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*横並び逆方向*/
	flex-direction:row-reverse;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3

flex-direction:column（縦並び）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*縦並び/
	flex-direction:column;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3

flex-direction:column-reverse （縦並び逆方向）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*縦並び逆方向/
	flex-direction:column-reverse;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3


flex-wrap「溢れた時の処理」

  • nowrap（溢れる事なく一列に配置 ※初期値）
  • wrap（溢れた時に折り返す、上から下）
  • wrap-reverse（溢れた時に折り返す、下から上）

flex-wrap:nowrap（溢れる事なく一列に配置 ※初期値）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*溢れる事なく一列に配置 ※初期値*/
	flex-wrap:nowrap;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4
5
6
7
8
9
10

flex-wrap:wrap（溢れた時に折り返す、上から下）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*溢れた時に折り返す、上から下*/
	flex-wrap:wrap;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4
5
6
7
8
9
10

flex-wrap:wrap-reverse（溢れた時に折り返す、下から上）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*溢れた時に折り返す、下から上*/
	flex-wrap:wrap-reverse;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4
5
6
7
8
9
10

flex-flow「flex-directionとflex-wrapをまとめて指定」

flex-flowは、flex-directionとflex-wrapをまとめて指定するプロパティです。flex-flowの後に一つ目がflex-directionの指定、二つ目がflex-wrapの指定です。

まとめて指定しているだけなので、flex-directionとflex-wrapをそれぞれ指定するのを同じです。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*flex-directionとflex-wrapをまとめて指定*/
	/*flex-flow:[flex-directionの指定] [flex-wrapの指定]*/
	/*下記はflex-direction:row;flex-wrap:nowrap;をそれぞれ指定したのとまったく同じです*/
	flex-flow:row nowrap;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}


justify-content 「左右のレイアウト」

※flex-directionがrowの場合は左右ですが、columnの場合は天地になります。

  • flex-start（左揃え ※初期値）
  • flex-end（右揃え）
  • center（中央揃え）
  • space-between（両端は余白なし、他は均等揃え）
  • space-around（両端も含めて均等揃え）

justify-content:flex-start（左揃え ※初期値）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*左揃え　※初期値*/
	justify-content:flex-start;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3

justify-content:flex-end（右揃え）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*右揃え*/
	justify-content:flex-end;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3

justify-content:center（中央揃え）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*中央揃え*/
	justify-content:center;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3

justify-content:space-between（両端は余白なし、他は均等揃え）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*両端は余白なし、他は均等揃え*/
	justify-content:space-between;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3

justify-content:space-around（両端も含めて均等揃え）

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*両端は余白なし、他は均等揃え*/
	justify-content:space-around;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3


align-items 「天地のレイアウト」

※flex-directionがrowの場合は天地ですが、columnの場合は左右になります。

  • stretch（子要素の高さに広げる ※初期値）
  • flex-start（上揃え）
  • flex-end（下揃え）
  • center（中央揃え）
  • baseline（ベースラインで揃える）

align-items:stretch（子要素の高さに広げる ※初期値）

※.boxに高さが指定されているとstretchが効かないため、ここではheightを指定していない.box-non-heightを用意し1と3のみに適用した。

HTML
<div class="flex-box">
  <div class="box"><span>1</span></div>
  <div class="box-non-height"><span>2</span></div>
  <div class="box"><span>3</span></div>
</div>
CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*子要素の高さに広げる ※初期値*/
	align-items:stretch;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
 
/*高さ設定のない.box-non-heightを追加*/
.box-non-height{
	width:100px;
	background-color:#999;
	border:1px solid #666;
	display:flex;
	align-items:center;
	justify-content: center;
}
1
2
3
4

align-items:flex-start（上揃え）

※1と3のみheightを指定していない.box-non-heightを適用。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*上揃え*/
	align-items:flex-start;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4

align-items:flex-end（下揃え）

※1と3のみheightを指定していない.box-non-heightを適用。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*下揃え*/
	align-items:flex-end;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4

align-items: center（中央揃え）

※1と3のみheightを指定していない.box-non-heightを適用。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*中央揃え*/
	align-items: center;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4

align-items: baseline（ベースライン揃え）

※1と3のみheightを指定していない.box-non-heightを適用。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*ベースライン揃え*/
	align-items: baseline;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4


align-content 「複数行の天地のレイアウト」

※flex-directionがrowの場合は天地ですが、columnの場合は左右になります。
flex-wrap:nowrapが適応されているとalign-contentは無効になります。

  • stretch（広げて配置 ※初期値）
  • flex-start（上揃え）
  • flex-end（下揃え）
  • center（中央揃え）
  • space-between（両端は余白なし、他は均等揃え）
  • space-around（両端も含めて均等揃え）

align-content:stretch（広げて配置 ※初期値）

※奇数のboxのみheightを指定していない.box-non-heightを適用、また、折り返しが必要なのでwrapを設定。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*折返しが必要なのでwrapを設定*/
	flex-wrap:wrap;
 
	/*広げて配置 ※初期値*/
	align-content:stretch;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4
5
6
7
8
9
10

align-content:flex-start（上揃え）

※奇数のboxのみheightを指定していない.box-non-heightを適用、また、折り返しが必要なのでwrapを設定。
※奇数は.box-non-heightなので高さがないがalign-items:stretch（初期値）が設定されているので横列の要素の高さに合わせて同じ高さになる。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*折り返しが必要なのでwrapを設定*/
	flex-wrap:wrap;
 
	/*上揃え*/
	align-content:flex-start;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4
5
6
7
8
9
10

align-content:flex-end（下揃え）

※奇数のboxのみheightを指定していない.box-non-heightを適用、また、折り返しが必要なのでwrapを設定。
※奇数は.box-non-heightなので高さがないがalign-items:stretch（初期値）が設定されているので横列の要素の高さに合わせて同じ高さになる。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*折り返しが必要なのでwrapを設定*/
	flex-wrap:wrap;
 
	/*下揃え*/
	align-content:flex-end;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4
5
6
7
8
9
10

align-content:space-between（両端は余白なし、他は均等揃え）

※奇数のboxのみheightを指定していない.box-non-heightを適用、また、折り返しが必要なのでwrapを設定。
※奇数は.box-non-heightなので高さがないがalign-items:stretch（初期値）が設定されているので横列の要素の高さに合わせて同じ高さになる。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*折り返しが必要なのでwrapを設定*/
	flex-wrap:wrap;
 
	/*両端は余白なし、他は均等揃え*/
	align-content:space-between;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4
5
6
7
8
9
10

align-content:space-around（両端も含めて均等揃え）

※奇数のboxのみheightを指定していない.box-non-heightを適用、また、折り返しが必要なのでwrapを設定。
※奇数は.box-non-heightなので高さがないがalign-items:stretch（初期値）が設定されているので横列の要素の高さに合わせて同じ高さになる。

CSS
.flex-box{
 
	/*親要素にdisplay:flexを指定*/
	display:flex;
 
	/*折り返しが必要なのでwrapを設定*/
	flex-wrap:wrap;
 
	/*両端も含めて均等揃え*/
	align-content:space-around;
 
	/*表示用*/
	background-color:#ccc;
	width:100%;
	min-height:300px;
	margin-bottom:60px;
}
1
2
3
4
5
6
7
8
9
10

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー（フリー）/ WEB講師（非常勤）/ 海外販売（法人）他

お仕事のご相談はお問い合わせフォームへお願いします。