1
Flex-Container
親要素の指定
2
Flex-Item
子要素の指定
Display
親要素の表示形式
flex
ブロック要素
inline-flex
インライン要素
row
横並び
column
縦並び
reverse
逆向き
justify-content
水平方向揃え
flex-start
左揃え
flex-end
右揃え
center
中央揃え
space-between
両端配置
space-around
均等配置
align-items
垂直方向揃え
flex-start
上揃え
flex-end
下揃え
center
中央揃え
baseline
ベースライン
stretch
高さ揃え
reverse
逆向き
justify-content
水平方向揃え
flex-start
上揃え
flex-end
下揃え
center
中央揃え
space-between
両端配置
space-around
均等配置
align-items
垂直方向揃え
flex-start
左揃え
flex-end
右揃え
center
中央揃え
baseline
ベースライン
stretch
高さ揃え
flex-wrap
子要素の折り返し設定
nowrap
折り返ししない
wrap
上から下
wrap-reverse
下から上
align-content
複数行設定
flex-start
上揃え
flex-end
下揃え
center
中央揃え
space-between
両端配置
space-around
均等配置
stretch
高さ揃え
align-content
複数行設定
flex-start
上揃え
flex-end
下揃え
center
中央揃え
space-between
両端配置
space-around
均等配置
stretch
高さ揃え
子要素の数
1
order
順序
flex
ベース設定(伸び率/縮み率/幅)
align-self
垂直方向揃え方
auto
flex-start
flex-end
center
baseline
stretch
2
order
順序
flex
ベース設定(伸び率/縮み率/幅)
align-self
垂直方向揃え方
auto
flex-start
flex-end
center
baseline
stretch
3
order
順序
flex
ベース設定(伸び率/縮み率/幅)
align-self
垂直方向揃え方
auto
flex-start
flex-end
center
baseline
stretch
ベンダープレフィックス :
WEBKIT
IE (ms)