Flexbox

flex 적용 전

first

second

third

 

display: flex 적용

first

second

third

flex-direction: column;

first

second

third

요수가 개수가 많을 때

First

Second

Third

Fourth

Fifth

flex-wrap: wrap를 통해 여러 행으로 나눔

First

Second

Third

Fourth

Fifth

First

Second

Third

Fourth

Fifth

align-items은 크로스 축에 대한 정렬

align-items: center;

First

Second

Third

justify-content은 주 축에 대한 정렬

justify-content: center;

First

Second

Third

---

 

Flexbox playground