【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の指定、3つ目が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講師(非常勤)/ 海外販売(法人)他

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