WebCre 〜WEB制作のおともに〜

flexBox レイアウトモデル
display:flex 基本
  • 1
  • 2
  • 3
  • 4
display:flex;
justify-content 水平方向の揃え
  • 1
  • 2
  • 3
  • 4
justify-content:left;
  • 1
  • 2
  • 3
  • 4
justify-content:center;
  • 1
  • 2
  • 3
  • 4
justify-content:right;
  • 1
  • 2
  • 3
  • 4
justify-content:space-between;
  • 1
  • 2
  • 3
  • 4
justify-content:space-around;
flex-direction 子要素の並ぶ向き
  • 1
  • 2
  • 3
  • 4
flex-direction:row;
  • 1
  • 2
  • 3
  • 4
flex-direction:column;
flex-wrap 子要素の折り返し
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
flex-wrap:wrap;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
flex-wrap:nowrap;
align-items 垂直方向の揃え
  • 1
  • 2
  • 3
  • 4
align-items:stretch;
  • 1
  • 2
  • 3
  • 4
align-items:flex-start;
  • 1
  • 2
  • 3
  • 4
align-items:flex-end;
  • 1
  • 2
  • 3
  • 4
align-items:center;
  • 1
  • 2
  • 3
  • 4
align-items:baseline;
項目をコピーして、ファイルに貼り付けてご使用ください。
部分的なコードやサンプルコードなど、用途や目的に応じて書き換えて使用することを前提としていますので、そのままでは活用出来ないものが多いです。
多少の知識がある方、これからもっと勉強して学んでいく気持ちがある方を対象としています。