【CSS】flexboxの基本（子要素） - 中田デザイン事務所

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

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

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

order「順序指定」

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

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

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

CSS

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

flex-grow「伸びる比率」

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

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

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

CSS

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

flex-shrink「縮む比率」

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

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

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

CSS

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

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;   }

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; }