flexboxの使い方一覧

  • 2019年4月27日
  • 2019年6月10日
  • entry
  • ツール
  • 親要素
    • display: flex;
    • flex-direction:子要素の配置方向
      • row:左から順に。デフォルト。
      • row-reverse:右から順に
      • column:上から順に
      • column-reverse:下から上に
    • flex-wrap:子要素の折り返し設定
      • nowrap:折り返しなし
      • wrap:折り返しして複数行になることあり
      • wrap-reverse:折り返しするときは、後半のが上にいく
    • justify-content:水平方向の揃え方 
      • flex-start:横方向は左揃え、縦方向は上揃え
      • flex-end:横方向は右揃え、縦方向は下揃え
      • center:中央揃え
      • space-between:余分な空きは均等にスペース開ける
      • space-around:space-betweenと同じだが、両端にもスペースをあける
    • align-items:垂直方向の揃え方
      • flex-start:横方向は左揃え、縦方向は上揃え
      • flex-end:横方向は右揃え、縦方向は下揃え
      • center:中央揃え
      • baseline:テキストのベースラインを揃える
      • stretch:説明むずい。縦いっぱい使う。
    • align-content:行の揃え方(複数行になった時)
      • flex-start:横方向は左揃え、縦方向は上揃え
      • flex-end:横方向は右揃え、縦方向は下揃え
      • center:中央揃え
      • space-between:余分な空きは均等にスペース開ける
      • space-around:space-betweenと同じだが、両端にもスペースをあける
  • 子要素
    • flex:短縮系
      • 0 1 auto:デフォルト
      • flex-grow:伸びる倍率。このプロパティに従い、自動的に利用可能な領域いっぱいまで伸びる。
        • 0:デフォルト
        • 1:全部等分で伸びる
        • 1、2:2は1のアイテムの2倍になる
        • none: ‘0 0 auto’と見なされる。
        • マイナス:無効
      • flex-shrink:縮む倍率。
        • 1:デフォルト
      • flex-basis:widthみたいなもの。ベースとなる横幅。最小の長さ。
        • auto:デフォルト
    • align-self:個別のFlexアイテムの垂直方向の揃え方
      • align-itemsと同じ。個別に指定できる。
    • order:順番指定
      • 順番を変えれる