flex-flow: row wrap;
STEP1. アイテムたちを自然に並べる
001
002
003
004
005
006
007
008
009
010
011
012
STEP2. アイテムたちの幅をふくらませる
001
002
003
004
005
006
007
008
009
010
011
012
STEP3. アイテムたちの高さをふくらませる
001
002
003
004
005
006
007
008
009
010
011
012
STEP4. コンテナ内に横方向の重力を発生させる
(justify-content: space-between;)
001
002
003
004
005
006
007
008
009
010
011
012
STEP5. 行内に縦方向の重力を発生させる
(align-items: center;)
001
002
003
004
005
006
007
008
009
010
011
012
STEP6. コンテナ内に縦方向の重力を発生させる
(align-content: end;)
001
002
003
004
005
006
007
008
009
010
011
012
flex-flow: row-reverse wrap;
STEP1. アイテムたちを自然に並べる
001
002
003
004
005
006
007
008
009
010
011
012
STEP2. アイテムたちの幅をふくらませる
001
002
003
004
005
006
007
008
009
010
011
012
STEP3. アイテムたちの高さをふくらませる
001
002
003
004
005
006
007
008
009
010
011
012
STEP4. コンテナ内に横方向の重力を発生させる
(justify-content: space-between;)
001
002
003
004
005
006
007
008
009
010
011
012
STEP5. 行内に縦方向の重力を発生させる
(align-items: center;)
001
002
003
004
005
006
007
008
009
010
011
012
STEP6. コンテナ内に縦方向の重力を発生させる
(align-content: end;)
001
002
003
004
005
006
007
008
009
010
011
012
flex-flow: column wrap;
STEP1. アイテムたちを自然に並べる
001
002
003
004
005
006
007
008
009
010
011
012
STEP2. アイテムたちの高さをふくらませる
001
002
003
004
005
006
007
008
009
010
011
012
STEP3. アイテムたちの幅をふくらませる
001
002
003
004
005
006
007
008
009
010
011
012
STEP4. コンテナ内に縦方向の重力を発生させる
(justify-content: space-between;)
001
002
003
004
005
006
007
008
009
010
011
012
STEP5. 列内に横方向の重力を発生させる
(align-items: center;)
001
002
003
004
005
006
007
008
009
010
011
012
STEP6. コンテナ内に横方向の重力を発生させる
(align-content: end;)
001
002
003
004
005
006
007
008
009
010
011
012
flex-flow: column-reverse wrap;
STEP1. アイテムたちを自然に並べる
001
002
003
004
005
006
007
008
009
010
011
012
STEP2. アイテムたちの高さをふくらませる
001
002
003
004
005
006
007
008
009
010
011
012
STEP3. アイテムたちの幅をふくらませる
001
002
003
004
005
006
007
008
009
010
011
012
STEP4. コンテナ内に縦方向の重力を発生させる
(justify-content: space-between;)
001
002
003
004
005
006
007
008
009
010
011
012
STEP5. 列内に横方向の重力を発生させる
(align-items: center;)
001
002
003
004
005
006
007
008
009
010
011
012
STEP6. コンテナ内に横方向の重力を発生させる
(align-content: end;)
001
002
003
004
005
006
007
008
009
010
011
012