基準形

box1

box2

box3

display:flex

box1

box2

box3

   
  HTML

  /* FlexBox-flex使用するには囲む必要がある */

  <div class="container">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
  </div>

  CSS

  .container {
  display: flex;        
  flex-direction: row;   /* 標準の状態で書いてないが適応されているから横並び */
  }

display:flexの特性

一列に詰め込まれる特性があるが大きさが変化

box1

box2

box3

box4

box5

box6

box7

box8

box9

box10

box11

box12

box13

box14

direction:column

box1

box2

box3

  
  .container-column {
  display: flex;
  flex-direction: column;
  }

container:row-reverse

右から左

box1

box2

box3

  
  .container-row-reverse {
  display: flex;
  flex-direction: row-reverse;
  }

Flex-wrap

一列に詰め込まれる特性があるので折り返す

box1

box2

box3

box4

box5

box6

box7

box8

box9

box10

box11

box12

box13

box14

  
  .container-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  }

justify-countent

justify-countent:flex-start

標準の設定

box1

box2

box3

  
  .container-justify-countent {
  display: flex;
  justify-content: flex-start;
  }

  
  .container-justify-countent-flex-end {
  display: flex;
  justify-content: flex-end;
  }

justify-countent:center

左右の余白を均等にして、真ん中に配置

box1

box2

box3

  
  .container-justify-countent-center {
  display: flex;
  justify-content: center;
  }

justify-countent:space-between;

左右を決めて、真ん中に決める

box1

box2

box3

  
  .container-justify-countent-space-between {
  display: flex;
  justify-content: space-between;
  }

justify-countent:space-around

左右が端まで行かないで、均等に並べる

box1

box2

box3

  
  .container-justify-countent-space-around {
  display: flex;
  justify-content: space-around;
  }

align-items:stretch

stretch=標準の設定

高さが指定されていないものは高さが指定されているものに合わせる設定

align-litems:flex-start=>高さの調整がされていないものがあれば、一番高い要素の上ぞろえに全てなる

align-litems:flex-end=>高さの調整がされていないものがあれば、一番高い要素の下ぞろえに全てなる

box100

box200

box300

  
  HTML

  <div class="container">
    <div class="box100">box100</div>
    <div class="box200">box200</div>
    <div class="box300">box300</div>
  </div>

  CSS

  .container {
  display: flex;
  align-items: stretch;
  }

  .box100 {
  width: 100px;
  height: 200px;
  border: 1px solid black;
  background-color: bisque;
  }

  .box200 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

  .box300 {
  width: 100px;
  height: 50px;
  border: 1px solid black;
  background-color: bisque;
  }

align-items

align-items:center

全体の枠の中の真ん中

box100

box200

box300

  
  .container-align-items-center {
  display: flex;
  align-items: center;
  }

align-items:center

+

justify-content:center

一番高い要素の上ぞろいになり、真ん中で配置

box100

box200

box300

  
  HTML

  <div class="container-container">
    <div class="box100">box100</div>
    <div class="box200">box200</div>
    <div class="box300">box300</div>
  </div>

  CSS

  .container-container {
  border: 2px solid blue;
  height: 500px;         /* 高さを指定 */
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  }

align-items:flex-start

+

justify-content:center

一番高い要素の上ぞろいになり、真ん中で配置

box100

box200

box300

  
  .container-container-flex-start {
  border: 2px solid blue;
  height: 500px;    /* 高さを指定 */
  padding: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  }

align-content:warp-space-折り返し表示

標準状態

box1

box2

box3

box4

box5

box6

box7

box8

box9

box10

box11

box12

box13

box14

box15

box16

box17

box18

box19

box20

align-content:space-between;

折り返して表示されて、上下に分かれて真ん中に配置される

box1

box2

box3

box4

box5

box6

box7

box8

box9

box10

box11

box12

box13

box14

box15

box16

box17

box18

box19

box20

  
  .container-composite-warp-space-between {
  display: flex;
  border: 2px solid blue;
  height: 500px;  
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;
  }

align-content:space-around

折り返して表示されて、上下に余白を作り余り分が真ん中に配置される

box1

box2

box3

box4

box5

box6

box7

box8

box9

box10

box11

box12

box13

box14

box15

box16

box17

box18

box19

box20

  
  .container-composite-warp-space-around {
  display: flex;
  border: 2px solid blue;
  height: 500px;  
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-around;
  }

各子要素(使用頻度小)

各子要素:標準状態

boxA

boxB

boxC

各子要素:order

並び順(数字の番号事に配置)

全ての範囲の要素にいれないと作動しない

boxA

boxB

boxC

  
  .boxA {
  order: 2;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

  .boxB {
  order: 1;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

  .boxC {
  order: 3;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

各子要素:flex-grow

Box:設定プロパティ{width: 0;}

伸びる幅(width)を指定{flex-grow: 1;=flex-grow: 2;}1:2の割合で表示

boxE

boxF

boxG

  
  .boxE {
  flex-grow: 1;    /* flex-grow: 1; */
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

  .boxF {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

  .boxG {         
  flex-grow: 2;    /* flex-grow: 1;  の2倍のwidth */
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

各子要素:flex-shrink

Box:設定プロパティ{width: 0;}

幅を縮小(width)を指定

縮小しすぎた要素は、小さくなりすぐるので{flex-basis: 300px;}これ以上縮小させない事も可能

boxE

boxF

boxG

boxI

boxL

  
  .boxI {
  flex-shrink: 1;     /*  flex-shrink: 1; */
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

  .boxL { 
  flex-shrink: 2;    /*  flex-shrink: 2; flex-basis: 300px;*/
  flex-basis: 300px;
  height: 100px;
  border: 1px solid black;
  background-color: bisque;
  }

各子要素:align-self

指定したものを縦方向の設定

分かりにくいかもしれないけど、余使わないと思う

boxH

boxZ

boxJ

  
  .boxH {
  width: 100px;
  height: 300px;
  border: 1px solid black;
  background-color: bisque;
  }

  .boxZ {
  width: 100px;
  height: 100px;
  align-self: flex-start;     /*上からスタート*/
  border: 1px solid black;
  background-color: bisque;
  }

  .boxJ {
  width: 100px;
  height: 50px;
  border: 1px solid black;
  background-color: bisque;
  }