[html/css]Flex box, Grid를 이용한 정렬

20240805수업

---

Flex box

display:flex

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

justify-content(수평정렬)

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

 

align-items(한줄 수직정렬)

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

 

align-contents(여러줄 수직정렬)

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

---

Grid

grid
(flexbox(Flexible Box Layout Module)는 한줄용, grid는 한 테이블용)

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.