新人向けチートシート: flexbox

コンポーネントを並べる

横に並べる

See the Pen OJPQxgo by taisukek (@taisukek) on CodePen.

.parent {
  display: flex; //親要素でflexコンテナーであることを宣言
}

.child1{
  flex: 0 0 100px; //子要素でflex率を指定
  background: lightgreen;
}

.child2{
  flex: 0 0 200px;
  background: lightsalmon;
}

縦に並べる

See the Pen povaWpz by taisukek (@taisukek) on CodePen.

.parent {
  display: flex;
  flex-direction: column; //子要素の並び方向はflex-directionで指定する。デフォルトはrow。
}

.child1{
  flex: 0 0 100px;
  background: lightgreen;
}

.child2{
  flex: 0 0 200px;
  background: lightsalmon;
}

コンポーネントの幅を残りいっぱいにする

サンプル

See the Pen GRgJooL by taisukek (@taisukek) on CodePen.

flex-basisとflex-growを利用する

.parent {
 /*子要素にflexレイアウトを適用する*/
  display: flex;
}

.child1 {
　/*要素の幅を100pxに指定*/
  flex: 0 0 100px; 
}

.child2 {
  /*
    要素の幅を残りいっぱいにする
    (<親要素の幅> - <flexレイアウト適用対象のflex-basis値の合計>)
  */
  flex: 1 0 0; 
}

flexとは

flexはflex-grow, flex-shrink, flex-basisの短縮系のため以下2つは同じ

 flex: 1 0 0;

 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: 0;