2016/02/28

FLEXBOX FROGGYチートシート

FLEXBOX FROGGYをクリアしたのでやりながらまとめたものを貼ります.
Flexboxはここでやった部分しかしりませんが,これだけでも便利ですね.

コンテナ全体

  • justify-content 水平方向への寄せなど
    • flex-start: 左寄せ
    • flex-end: 右寄せ
    • center: 中央寄せ
    • space-between: 要素間にスペースを入れる
    • space-around: 要素の前後にスペースを入れる
  • align-content 垂直方向への寄せなど
    • flex-start 上寄せ
    • flex-end 下寄せ
    • center 中央寄せ
    • space-between: 要素間にスペースを入れる
    • space-around: 要素の前後にスペースを入れる
  • align-items
    • flex-start: 上部に表示
    • flex-end: 下部に表示
    • center: 上下の中央に表示
    • baseline: コンテナのベースラインに表示
    • stretch: よくわからない
  • flex-direction (先頭の方向を変えるのでjustify-content, align-itemsの挙動が変わる)
    • row: 左から右に並べる
    • row-reverse: 右から左に並べる
    • column: 上から下に並べる
    • column-reverse: 下から上に並べる
  • flex-wrap
    • nowrap: 一行で表示
    • wrap: 行端までいくと新たに行を追加して表示する
    • wrap-reverse: 反対から表示し,行端までいけば新たに行を追加して表示する
  • flex-flow
    • flex-directionとflex-wrapを同時に使える.値はスペスで区切って書く.

個別の要素に対して

  • order
    • 現在位置を 0 として順番をずらす.一つ後ろにずらすなら1,一つ前なら-1.
  • align-self
    • 垂直方向の位置を変える.コマンドはalign-itemsと同じ.

© 2022 wat-aro