flexboxまとめ

• justify-content
  主軸方向(デフォルトでは横方向)の並び方を指定.

  • center
  • space-between
  • space-around

• align-items
  主軸方向じゃない方向の並び方を指定

  • center
  • flex-start
  • flex-end

• flex-direction
  並び方を指定

  • row
  • row-reverse
  • column
  • column-reverse

• flex-wrap

  • nowrap
  • wrap
  • wrap-reverse

#pond {
  display: flex;
  flex-wrap: wrap
}

• flex-flow
  • flex-directionとflex-wrapの2つのプロパティをまとめて指定することができる.

#pond {
  display: flex;
flex-flow: column wrap
}

• align-content
  行間を指定する. デフォルトはstretch.
  • flex-start: コンテナの上側に詰められる
  • flex-end: コンテナの下側に詰められる
  • center: コンテナの中央に詰められる
  • space-between: その間に等しい間隔をあけて表示される
  • space-around: その周囲に等しい間隔をあけて表示される
  • stretch: コンテナに合うように引き伸ばされる(これがデフォルト!!)

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

• order
  order: -1
  orderの小さい順に表示される. 個別に順序を変えたい時.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
order: 3;
}

• align-self

align-itemsと同じ値をうけつけ、個別に指定する.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
align-self: flex-end;
}