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;
- この文章はダミーです
この文章はダミーです
- 量、字間
- ボタン要素
- ダミーテキスト
ボックス並列で使えるレイアウト
左の横幅固定、右の横幅可変
左の横幅可変、右の横幅固定
左右とも可変
左右固定、中は可変
左と中は固定、右は可変
3カラム全て可変