box content
| contetn | main영역에서 전체 하얀색 box |
|---|---|
| left-contetn | main영역에서 왼쪽 하얀색 box |
| right-contetn | main영역에서 오른쪽 하얀색 box |
| row | main영역에서 위아래 box |
메인축 배치
| flex | 아이템들을 가로 방향으로 배치 |
|---|---|
| flex-column | 아이템들을 세로 방향으로 배치 |
메인축 방향 정렬
| justify-start | 아이템들을 시작점으로 정렬합니다. |
|---|---|
| justify-center | 아이템들을 가운데로 정렬합니다. |
| justify-between | 아이템들의 “사이(between)”에 균일한 간격으로 정렬합니다. |
| justify-end | 아이템들을 끝점으로 정렬합니다. |
수직축 방향 정렬
| align-start | 아이템들을 시작점으로 정렬합니다. |
|---|---|
| align-center | 아이템들을 가운데로 정렬합니다. |
| align-end | 아이템들을 끝점으로 정렬합니다. |
너비 비율(부모에 flex나 flex-column이 있어야 자식에 너비를 넣을 수 있음)
| flex5 | 너비 4.5% |
|---|---|
| flex10 | 너비 9.5% |
| flex15 | 너비 14.5% |
| flex20 | 너비 19.5% |
| flex25 | 너비 24.5% |
| flex30 | 너비 29.5% |
| flex35 | 너비 34.5% |
| flex40 | 너비 39.5% |
| flex45 | 너비 44.5% |
| flex50 | 너비 49.5% |
| flex55 | 너비 54.5% |
| flex60 | 너비 59.5% |
| flex65 | 너비 64.5% |
| flex70 | 너비 69.5% |
| flex75 | 너비 74.5% |
| flex80 | 너비 79.5% |
| flex85 | 너비 84.5% |
| flex90 | 너비 89.5% |
| flex95 | 너비 94.5% |
텍스트 정렬
| text-lf | 텍스트 왼쪽정렬 |
|---|---|
| text-ct | 텍스트 가운데정렬 |
| text-rg | 텍스트 오른쪽정렬 |