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

   

レッスン

先程のページはflexboxを利用した親要素のプロパティ一覧でしたが、こちらは子要素のプロパティ一覧です。

親要素にdisplay:flexを指定していないと子要素のプロパティは機能しません。

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

order「順序指定」

数値の順に場所が入れ替わる。マイナス値も可。
数値が少ない方が先頭になる。

  • 数値を指定（※初期値は0）

order:数値（※初期値は0）

CSS
/*2番目の.boxをorder:-1にして1番目より前に移動*/
.box:nth-child(2){
 
/*初期値が0のため、2番目が一番手前に移動する*/
	order:-1;
 
}
1
2
3

flex-grow「伸びる比率」

親要素に空きスペースがあった場合に伸びる。
伸び率（どれくらい伸びるか）を他との相対値（整数）で指定。
数値が大きい方が広くなる

  • 数値を指定（※初期値は0）

flex-grow:数値（※初期値は0）

CSS
/*2番目の.boxをflex-grow:1にして空白スペースを伸ばして埋める*/
.box:nth-child(2){
 
/*初期値が0のため、2番目が左右に伸びる*/
	flex-grow:1;
 
}
1
2
3

flex-shrink「縮む比率」

flex-growと逆。マイナス値は無効。
数値が大きい方が縮む。

  • 数値を指定（※初期値は1、マイナス値は無効）

flex-shrink:数値（※初期値は1）

CSS
/*2番目の.boxをflex-shrink:2にして他より縮める。*/
.box:nth-child(2){
 
/*初期値が1のため、2番目が左右に縮む*/
	flex-shrink:2;
 
}
1
2
3
4
5
6
7
8
9
10

flex-basis「子要素の幅」

並べた子要素の幅を制御（基本的にはwidthと同じ）。
※flex-directionがcolumnの場合はheightになる。

  • サイズを指定（※初期値はauto）

flex-basis:サイズ（※初期値はauto）

CSS
/*2番目の.boxをflex-basis:200pxにして横幅を200pxにする。*/
.box:nth-child(2){
 
/*初期値がauto、2番目横幅が200pxになる*/
	flex-basis:200px;
 
}
1
2
3

flex「flex-grow、flex-shrink、flex-basisの3つをまとめて指定」

「flex-grow」、「flex-shrink」、「flex-basis」の3つをまとめて指定する事もできます。flexの後に1つ目がflex-growの指定、2つ目がflex-shrinkの指定、３つ目がflex-basisです。

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

CSS
.box:nth-child(2){
 
	/*3つをまとめて指定*/
	/*flex-flow:[flex-growの指定] [flex-shrinkの指定] [flex-basisの指定]*/
	/*下記はflex-grow:0;flex-shrink:1;flex-basis:auto;をそれぞれ指定したのとまったく同じです*/
	flex:0 1 auto;
 
}


flex「flex-grow、flex-shrink」または「flex-grow、flex-basis」の2つをまとめて指定

「flex-grow、flex-shrink」または「flex-grow、flex-basis」の2つをまとめて指定できます。flexの後に「単位のない1つの数値」を2つ指定した場合は、flex-growとflex-shrinkの指定になり、flexの後に「単位のない1つの数値」と「単位付きの1つの数値」のそれぞれ1つずつを指定した場合は、flex-growとflex-basisの指定になります。

CSS
.box:nth-child(2){
 
	/*2つをまとめて指定*/
	/*下記はflex-grow:0;flex-shrink:1;flex-basis:auto;をそれぞれ指定したのとまったく同じです*/
	flex:0 1;
 
	/*下記はflex-grow:0;flex-shrink:1;flex-basis:100px;をそれぞれ指定したのとまったく同じです*/
	flex:0 100px;
}


flex「単位のない1つの数値、単位付きの1つの数値」または「initial、auto、none」

flexに単位のない1つの数値またはinitial、auto、noneと指定する事もできます。

flex：単位のない1つの数値（「数値 1 0」が適用される）

flexに「単位のない1つの数値」を入れると「flex:数値 1 0」が適用されます。flex-basisの省略時の既定値は0（初期値はauto）になる。

  • flex:単位のない1つの数値（数値 1 0が適用される）
CSS
.box:nth-child(2){
 
	/*1つのみの指定「単位のない1つの数値」*/
	/*下記はflex-grow:1;flex-shrink:1;flex-basis:0;をそれぞれ指定したのとまったく同じです*/
	flex:1;
 
}


flex：単位付きの1つの数値（「flex-basis」が適用される）

flexに「単位付きの1つの数値（数値px, 数値em等）」を入れるとflex-basisが適用されます。flex-grow:0、flex-shrink:1になる。

  • flex:単位付きの1つの数値（flex-basisが適用される）
CSS
.box:nth-child(2){
 
	/*1つのみの指定「単位付きの1つの数値」*/
	/*下記はflex-grow:0;flex-shrink:1;flex-basis:100px;をそれぞれ指定したのとまったく同じです*/
	flex:100px;
 
}


flex：initial（「0 1 auto」が適用される）

flex：initialは「flex:0 1 auto」が適用されます。

  • flex：initial（0 1 autoが適用される）
CSS
.box:nth-child(2){
 
	/*1つのみの指定「initial」*/
	/*下記はflex-grow:0;flex-shrink:1;flex-basis:auto;をそれぞれ指定したのとまったく同じです*/
	flex：initial;
 
}


flex：auto（「1 1 auto」が適用される）

flex：autoは「flex: 1 1 auto」が適用されます。

  • flex：auto（1 1 autoが適用される）
CSS
.box:nth-child(2){
 
	/*1つのみの指定「auto」*/
	/*下記はflex-grow:1;flex-shrink:1;flex-basis:auto;をそれぞれ指定したのとまったく同じです*/
	flex：auto;
 
}


flex：none（0 0 auto」が適用される）

flex：noneは「flex: 0 0 auto」が適用されます。

  • flex：auto（0 0 autoが適用される）
CSS
.box:nth-child(2){
 
	/*1つのみの指定「none」*/
	/*下記はflex-grow:0;flex-shrink:0;flex-basis:auto;をそれぞれ指定したのとまったく同じです*/
	flex：none;
 
}


align-self「子要素の垂直方向」

1つの任意の子要素のみの指定が可能。

  • auto（※初期値 親要素のalign-itemsの値が適用される）
  • flex-start（上揃え）
  • flex-end（下揃え）
  • center（中央揃え）
  • baseline（ベースライン揃え）
  • stretch（広げて配置）

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

HTML
<div class="flex-box">
  <div class="box-non-height"><span>1</span></div>
  <div class="box-non-height"><span>2</span></div>
  <div class="box-non-height"><span>3</span></div>
  <div class="box-non-height"><span>4</span></div>
  <div class="box-non-height"><span>5</span></div>
  <div class="box-non-height"><span>6</span></div>
</div>
CSS
 
/*1番目の.boxをalign-self:auto（初期値）*/
.box:nth-child(1){
	align-self:auto;
}
 
/*2番目の.boxをflex-start（上揃え）*/
.box:nth-child(2){
	align-self:flex-start;
}
 
/*3番目の.boxをflex-end（下揃え）*/
.box:nth-child(3){
	align-self:flex-end;
}
 
/*4番目の.boxをcenter（中央揃え）*/
.box:nth-child(4){
	align-self:center;
}
 
/*5番目の.boxをbaseline（ベースライン揃え）*/
.box:nth-child(5){
	align-self:baseline;
}
 
/*6番目の.boxをstretch（広げて配置）*/
.box:nth-child(6){
	align-self:stretch;
}
 
/*高さ設定のない.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
5
6

Yuki Nakata

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

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