정식 명칭은 Flexible Box module이지만 Flex, Flexible Box, Flexbox 라고 부르기도 합니다. Flex는 flexbox 인터페이스 내의 아이템 간 공간 배분 과 강력한 정렬 기능을 제공하기 위해 1차원 레이아웃 모델로 설계 되었습니다.
flex를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 의미입니다.
먼저, 주축과 교차축이라는 두 개의 축에 대한 정의를 알아보겠습니다.
flex를 잘 다루기 위해선 이 두 개의 축이 어떻게 동작하는지 처음부터 이해하는 것이 중요합니다.
주축은 flex-direction
속성에 의해 지정되며 4개의 값을 가질 수 있습니다.
row
row-reverse
column
column-reverse
row
혹은 row-reverse
를 부여하면 주축은 인라인 방향으로 행을 따르게 됩니다.
column
혹은 column-reverse
을 부여하면 주축은 페이지 상단에서 하단으로 블록 방향을 따릅니다.
교차축은 주축의 수직으로 지정됩니다. 만약 주축이 row
혹은 row-reverse
라면 교차축은 열 방향을 따르게 됩니다.
주축이 column
혹은 column-reverse
라면 교차축은 행 방향을 따르게 됩니다.
위에서 flex는 강력한 정렬 기능을 제공한다고 말씀드렸습니다. flex로 아이템들을 정렬하고 끝을 맞추려면(justify) 어느 축이 어느 방향인지 이해하는 것이 중요합니다.
flex는 주측, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작합니다.
flex에는 시작점(flex-start)과 끝점(flex-end)이라는 개념이 존재합니다.
이는 두 축의 시작하는 지점과 끝나는 지점을 말하며 방향에 따라 시작점과 끝점이 달라집니다.
기본적으로 아이템은 한 줄로만 표시되고 줄 바꿈 되지 않습니다.
따라서 아이템을 줄 바꿈 하려면 flex-wrap
속성을 사용하여야 합니다.
값 | 설명 |
---|---|
nowrap | 모든 Item을 한 줄에 표시 |
wrap | Items을 여러 줄로 묶음 |
wrap-revers | 여러 줄로, wrap의 반대방향으로 묶음 |
주축은 justify-content
속성을 사용하여 정렬 방법을 지정합니다.
값 | 설명 |
---|---|
flex-start | Items를 시작점(flex-start)으로 정렬 |
flex-end | Items를 끝점(flex-end)으로 정렬 |
center | Items를 가운데 정렬 |
space-between | 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 |
space-around | Items를 균등한 여백을 포함하여 정렬됨 |
교차축은 상황에 따라 align-content
속성과, align-items
속성을 통해 정렬 방법을 지정합니다.
Grid는 2차원의 레이아웃 시스템을 제공합니다.
위에서 배운 1차원 레이아웃 시스템인 flex도 훌룡하지만, 조금 더 복잡한 레이아웃을 위해 Grid를 사용할 수 있습니다.
Grid는 Flex와 같이 Container와 Item이라는 두 가지 개념으로 구분되어 있습니다.
Container는 Item을 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다.
Gird Container를 위한 속성은 다음과 같습니다.
속성 | 의미 |
---|---|
display | 그리드 컨테이너(Container)를 정의 |
grid-template-rows | 명시적 행(Track)의 크기를 정의 |
grid-template-columns | 명시적 열(Track)의 크기를 정의 |
grid-template-areas | 영역(Area) 이름을 참조해 템플릿 생성 |
grid-template | grid-template-xxx 의 단축 속성 |
row-gap(grid-row-gap) | 행과 행 사이의 간격(Line)을 정의 |
column-gap(grid-column-gap) | 열과 열 사이의 간격(Line)을 정의 |
gap(grid-gap) | xxx-gap 의 단축 속성 |
grid-auto-rows | 암시적인 행(Track)의 크기를 정의 |
grid-auto-columns | 암시적인 열(Track)의 크기를 정의 |
grid-auto-flow | 자동 배치 알고리즘 방식을 정의 |
grid | grid-template-xxx 과 grid-auto-xxx 의 단축 속성 |
align-content | 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬 |
justify-content | 그리드 콘텐츠를 수평(행 축) 정렬 |
place-content | align-content 와 justify-content 의 단축 속성 |
align-items | 그리드 아이템(Items)들을 수직(열 축) 정렬 |
justify-items | 그리드 아이템들을 수평(행 축) 정렬 |
place-items | align-items 와 justify-items 의 단축 속성 |
Grid Item을 위한 속성들은 다음과 같습니다.
속성 | 의미 |
---|---|
grid-row-start | 그리드 아이템(Item)의 행 시작 위치 지정 |
grid-row-end | 그리드 아이템의 행 끝 위치 지정 |
grid-row | grid-row-xxx 의 단축 속성(행 시작/끝 위치) |
grid-column-start | 그리드 아이템의 열 시작 위치 지정 |
grid-column-end | 그리드 아이템의 열 끝 위치 지정 |
grid-column | grid-column-xxx 의 단축 속성(열 시작/끝 위치) |
grid-area | 영역(Area) 이름을 설정하거나, grid-row 와 grid-column 의 단축 속성 |
align-self | 단일 그리드 아이템을 수직(열 축) 정렬 |
justify-self | 단일 그리드 아이템을 수평(행 축) 정렬 |
place-self | align-self 와 justify-self 의 단축 속성 |
order | 그리드 아이템의 배치 순서를 지정 |
z-index | 그리드 아이템의 쌓이는 순서를 지정 |
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
“플랙스박스는 좀 더 콘텐츠에 초점이 맞춰져 있습니다. 플랙스박스의 이상적인 사용 사례는 여러 아이템을 컨테이너에 고르게 배치하려는 경우입니다. 여기서 콘텐츠의 크기가 각 아이템이 차지하는 공간을 결정합니다. 아이템이 새로운 줄로 줄 바꿈 되면, 아이템의 크기와 해당 줄의 사용 가능한 공간에 따라 간격이 조정됩니다.
그리드는 레이아웃을 먼저 고려하게 됩니다. CSS 그리드 레이아웃을 사용할 때는 우선 레이아웃을 작성한 다음 그 위에 아이템을 배치하거나, 자동 배치 규칙을 통해 견고하게 짜인 그리드 위에 놓인 그리드 셀에 아이템을 배치하게 됩니다.” -MDM
위의 말을 한마디로 정리를 해보자면, flex는 콘텐츠 위주의 정렬에 적합하고, grid는 레이아웃 위주의 정렬에 적합합니다.
Reference.
MDN
heropy's blog
flex와 grid 차이점