F®exi.
F®exi.
CSSフレックスボックスジェネレーター「フレクシィ」・ カラムレイアウトを直感的に、簡単に。
height：
1500px
width：
80%
カラムの数
-
+
カラムの水平方向への配置
中央寄せ (center)
左寄せ (flex-start)
右寄せ (flex-end)
間隔を均等 (space-between)
周囲に均等 (space-around)
均等配置 (space-evenly)
引き伸ばす（nomal）
カラムの垂直方向への配置
引き伸ばす (stretch)
上寄せ (flex-start)
下寄せ (flex-end)
中央寄せ (center)
ベースライン (baseline)
カラムの並びと間隔
横 (row)
縦 (column)
横反転 (row-reverse)
縦反転 (column-reverse)
-
+
px
画面横幅に対するカラムの折り返しかた
折り返す (wrap)
逆に折り返す (wrap-reverse)
折り返さない (nowrap)
-
+
カラム内の水平方向の配置
左寄せ (flex-start)
右寄せ (flex-end)
中央寄せ (center)
カラム内の垂直方向の配置
上寄せ (flex-start)
下寄せ (flex-end)
中央寄せ (center)
間隔を均等 (space-between)
周囲に均等 (space-around)
均等配置 (space-evenly)
カラム内の並びと間隔
縦 (column)
横 (row)
縦反転 (column-reverse)
横反転 (row-reverse)
-
+
px
カラム内の余白
-
+
px
CSSをコピー