[CSS] flexレイアウトの簡単なデモ
概要
使いやすそうなものをピックアップ。
DEMO
a,b,c
a
b
c
1~15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- 子要素のwidth:
- 子要素の高さ:
- flex-direction:
-
インライン軸の指定(itemが並ぶ向きの指定)
- flex-wrap:
-
子要素を端まで並べたとき折り返すか否か
- justify-content:
-
インライン軸方向の行ごとの配置方法 ※flex-wrap: nowrapでは無効
- align-content:
-
交差軸方向の行ごとの配置方法 ※flex-wrap: nowrapでは無効
- align-items:
-
交差軸方向の要素ごとの配置方法