CSS정리: flexbox와 grid

서론

 css의 모든 것은 주변에 box를 가진다. 따라서 element들을 잘 배치하기 위해서는, 좋은 layout을 위해선, 이를 잘 이해해야할 필요가 있다.

 css의 display속성에는 크게 inline과 block(outer display type)이 있다. 예를 들면 <a>, <span>, <em> and <strong>같은 태그들은 display type이 default로 inline이고 <h1> and <p>같은 태그들은 display type이 default로 block이다. 이 외에도 element들을 한 라인에 배열하기 위한 inline-block등이 있다. 그러나 inline-block은 반응형 웹사이트를 만들때 문제가 생기는데 width와 height로 크기, 위치를 지정하다 보니 특정 기기를 기준으로 layout을 만들 시 다른 크기의 기기에서 봤을 때 layout이 깨지는 문제가 생기기 때문이다.

 이런 문제를 inner display type을 flexbox나 grid로 지정하여 해결할 수 있다.

Flexbox

 먼저 flexbox는 두 축을 따라 element들이 배치된다. flex에는 container와 item이 있다. container는 item들을 담는 박스이고 item은 박스안의 요소들이다. 

figure1. flexbox model(https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

flexbox의 기본 direction은 horizon이다. 즉 main axis가 horizon이고 cross axis는 vertical이다. flexbox에 사용할 수 있는 속성들은 크게 다음과 같다.

Container

• flex-direction: 요소들의 주축을 결정한다. row는 수평 방향, column은 수직 방향이다.
• justify-content: 주축 상에서 요소들의 정렬 방식을 지정한다.
• align-items: 교차축 상에서 요소들의 정렬 방식을 지정한다.
• flex-wrap: 요소들이 여러 줄로 나누어지게 할지, 한 줄에만 배치될지를 결정한다.
• align-content: 여러 줄의 요소들 사이의 간격을 결정한다.

flex-direction은 기본 정렬축을 의미한다. default는 row이고 main axis는 horizon이 된다. column으로 하면 main axis가 veritcal로 바뀐다. justify-content는 flex item들이 main axis상의 어디에 있을지를 정하고 align-items은 cross axis상의 어디에 있을지를 정하는 속성이다. 마지막으로 아래 마지막 3개 속성은 flex속성 하나로 축약해서 쓸 수 있다.

Items

• order: 요소의 순서를 지정한다.
• flex-grow: 요소가 주 축에서 얼마나 늘어나야 하는지의 비율을 결정한다.
• flex-shrink: 요소가 줄어들 때 얼마나 줄어들어야 하는지의 비율을 지정한다.
• flex: flex-grow, flex-shrink, flex-basis의 축약형이다.
• align-self: 개별 요소의 교차축 정렬을 지정한다.

Grid

 그러나 flexbox도 문제점이 있는데 격자배치를 하기 힘들다는 것이다. 이를 위해 inner display type으로 grid를 사용할 수 있다. grid는 행렬형태로 item들을 배치하는 layout이다. Grid 레이아웃을 사용하면 복잡한 2차원 레이아웃도 비교적 쉽게 구현할 수 있다.

figure2. grid model(https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)

Containers

Grid Container는 Grid Items들을 감싸는 요소로서, Grid 레이아웃의 설정이 주로 이곳에서 이루어진다.

• grid-template-columns / grid-template-rows: 각 열 및 행의 크기를 지정한다.
• column-gap / row-gap: 열과 행 사이의 간격을 지정한다.
• gap: column-gap과 row-gap의 축약형이다.
• grid-template-areas: grid 영역을 이름으로 지정하고 배치한다.
• justify-items / align-items: 항목들을 그리드 셀 안에서 정렬한다.
• place-items: justify-items와 align-items의 축약형이다.
• grid-auto-rows / grid-auto-columns: 자동으로 크기가 지정되지 않은 행/열의 크기를 설정한다.
• grid-auto-flow: 항목들이 그리드에 어떻게 배치될지를 결정한다.

Items

Grid Item은 Grid Container 내부의 각 요소로서, 이들의 배치와 스타일링을 위한 속성들이 존재한다.

• grid-column-start / grid-column-end / grid-row-start / grid-row-end: 항목의 시작점과 끝점을 지정하여 그리드에 배치한다.
• grid-column / grid-row: grid-column-start/end 및 grid-row-start/end의 축약형이다.
• grid-area: 그리드 영역 이름을 사용하여 항목을 배치한다.
• justify-self / align-self: 개별 항목을 그리드 셀 내에서 정렬한다.
• place-self: justify-self와 align-self의 축약형이다.