Flexboxの主なレイアウト

01
display: flex;

02
display: flex;
align-items: flex-start;

03
display: flex;
align-items: center;

04
display: flex;
align-items: flex-end;

05
任意要素にverticalを指定
align-self: center;
align-self: flex-end;

06
display: flex;
justify-content: center;

07
display: flex;
justify-content: flex-end;

08
display: flex;
justify-content: space-between;

09
display: flex;
justify-content: space-around;

10
flex-direction: column;

11
display: flex;
flex-direction: column;
align-items: flex-start;

12
display: flex;
flex-direction: column;
align-items: center;

13
display: flex;
flex-direction: column;
align-items: flex-end;

14
height: 300px;（100%）
display: flex;
justify-content: flex-start;
align-items: center;

15
height: 300px;（100%）
display: flex;
justify-content: center;
align-items: center;

16
height: 300px;（100%）
display: flex;
justify-content: flex-end;
align-items: center;

17
height: 300px;（100%）
display: flex;
align-items: flex-end;

18
height: 300px;（100%）
display: flex;
justify-content: center;
align-items: flex-end;

19
height: 300px;（100%）
display: flex;
justify-content: flex-end;
align-items: flex-end;

20
子要素に flex: 1;

21
最初の子要素は flex: 2; / 他の子要素は flex: 1;

22
最初の子要素にのみ flex: 1;

ヘッダーで使えるレイアウト

左右振り分け

均等に振り分け

左側に1つ、右側に複数

左側に複数、右側に1つ

左右に複数振り分け

左右に複数振り分けて段あり

ボックス並列で使えるレイアウト

左の横幅固定、右の横幅可変

左の横幅可変、右の横幅固定

左右とも可変

左右固定、中は可変

左と中は固定、右は可変

3カラム全て可変

フッターで使えるレイアウト

余白を均等配置

左右以外に余白を均等配置

要素を並列させてコピーライトのみ下部へ