DXB CSS

Flexbox

flex-direction, justify, align, wrap, gap — 완전한 플렉스박스 시스템

Flex Direction

flex flex-row

1

2

3

flex flex-col

1

2

3

flex flex-row-reverse

1

2

3

flex flex-col-reverse

1

2

3

Justify Content

justify-start

justify-center

justify-end

justify-between

justify-around

justify-evenly

Align Items

items-start

items-center

items-end

items-stretch

items-baseline

Small

Big

Mid

Grow / Shrink / Basis

flex-1 (grow)

flex-1

flex-1

w-20

basis-1/3, basis-2/3

1/3

2/3

gap-* spacing

A

B

C

gap-8