flexboxのプロパティ設定の組合せ確認 script

container

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

親要素のプロパティ

属性値：

flex-direction：
flex-wrap：
justify-content：
align-items：
align-content：
container の height：

※ container の height指定 は、column や align-contentの確認用です

上記の flexbox の各プロパティの組合せは、(4×3×5×5×6)で、1800通りになります

この html は、各プロパティの値をラジオボタンで選択し、どのように表示されるか確認する javascript の html です
「親要素の更新」ボタンをクリックすると、インラインの style プロパティの属性値を javascript が書き換えます

height を設定すると stretch が効かない！！
（上の Item では、Item4,Item6 に height、Item8 に min-height を設定していますが、他の Item は height 無指定です）

height を設定しないか、min-height の設定は stretch が効きます！

子要素の表示

☆ 設定後に閉じても、設定値は有効です。再ロードするまで保持されます！

子要素のプロパティ

Item プロパティ
Item1

属性値：

order：
（優先順位：整数＋－可）
flex-grow：
（伸び率）
flex-shrink：
（縮み率）
flex-basis：
（初期の幅指定、auto/~px/~em/~%、等）
align-self：
Item2

属性値：

order：
flex-grow：
flex-shrink：
flex-basis：
align-self：
Item3

属性値：

order：
flex-grow：
flex-shrink：
flex-basis：
align-self：
Item4

属性値：

order：
flex-grow：
flex-shrink：
flex-basis：
align-self：
Item5

属性値：

order：
flex-grow：
flex-shrink：
flex-basis：
align-self：
Item6

属性値：

order：
flex-grow：
flex-shrink：
flex-basis：
align-self：
Item7

属性値：

order：
flex-grow：
flex-shrink：
flex-basis：
align-self：
Item8

属性値：

order：
flex-grow：
flex-shrink：
flex-basis：
align-self：
Item9

属性値：

order：
flex-grow：
flex-shrink：
flex-basis：
align-self：
top