Main 이동

flex 방향

flex-row(tailwind 표현: flex-row)

D
O
O
Y

flex-row-reverse(tailwind 표현: flex-row-reverse)

D
O
O
Y

flex-column(tailwind 표현: flex-col)

D
O
O
Y

flex-column-reverse(tailwind 표현: flex-col-reverse)

D
O
O
Y

flex 정렬

flex justify-center(tailwind 표현: justify-center)

D
O
O
Y

flex flex-start(tailwind 표현: justify-start)

D
O
O
Y

flex flex-end(tailwind 표현: justify-end)

D
O
O
Y

flex justify-between

D
O
O
Y

flex justify-around

D
O
O
Y

flex justify-evenly

D
O
O
Y

flex space -between(tailwind 표현: space-x-4)

D
O
O
Y

flex space-around(tailwind 표현: place-content-around)

D
O
O
Y

flex space-evenly(tailwind 표현: place-content-evenly)

D
O
O
Y

flex items-center(tailwind 표현: items-center)

D
O
O
Y

flex items-start(tailwind 표현: items-start)

D
O
O
Y

flex items-end(tailwind 표현: items-end)

D
O
O
Y

flex flex-wrap(tailwind 표현: flex-wrap)

D
O
O
Y
D
O
O
Y
D
O
O
Y
D
O
O
Y

flex flex-nowrap(default)(tailwind 표현: flex-nowrap)

D
O
O
Y
D
O
O
Y
D
O
O
Y
D
O
O
Y

flex flex-wrap-reverse(tailwind 표현: flex-wrap-reverse)

D
O
O
Y
D
O
O
Y
D
O
O
Y
D
O
O
Y

flex 그 외

flex > grow

D
O
O
Y

flex > grow-0

D
O
O
Y