[CSS] flex box를 위한 속성들

저번 글에서 flex box에 대해 알아봤으며 이제 flex box로 지정했을 때 포함된 item들에게 적용시킬 수 있는 속성은 무엇이 있는지 알아보겠습니다. 아래 링크는 flex에 대한 기본을 다루고 있고 이 글을 이해하는데 도움이 되실 수 있습니다.

kimmeh1.tistory.com/23

[CSS] flex 이해하기

---

▶ flex-direction

flex로 지정된 container의 item들을 어떤 방향을 정렬시킬지 정하는 속성입니다. 기본적으로 flex로 설정하면 row로 item들이 정렬이 되지만 column을 통해 세로로 정렬시킬 수 있습니다. 또한 row-reverse, column-reverse를 통해 반대에서부터 정렬을 시킬 수 있습니다. 아래 그림에서 왼쪽은 column, 오른쪽은 row로 설정한 결과입니다.

 

▶ justify-content

main-axis를 기준으로 item들을 어떻게 배치시킬지 정하는 속성입니다. 이 속성에는 flex-start, flex-end, center, space-between, space-around가 있습니다. flex로 정한 container의 방향이 row이면 가로가 main-axis가 됩니다. 그럼 각 속성에 의해 어떻게 배치가 되는지 알아보겠습니다.

 

- flex-start

기본으로 설정된 것이며 가장 앞쪽부터 배치가 됩니다. flex-end는 그 반대가 됩니다.

- center

item들이 중앙에 배치되는 것을 알 수 있습니다.

- space-between

item들 사이에 균등한 공간을 두고 배치가 되는 것을 알 수 있습니다.

- space-around

space-between와 다르게 item들의 앞, 뒤에 공간을 두고 배치가 되는 것을 알 수 있습니다.

 

▶ align-items

justify-content와 반대로 cross-axis를 기준으로 item들을 어떻게 배치시킬지 정하는 것입니다. 만약 flex-direcction이 row이면 cross-axis는 column이기 때문에 세로축을 기준으로 정렬이 됩니다. 이 속성에는 flex-start, flex-end, center 등이 있으며 center만 알아보겠습니다. 다음 그림은 row로 정렬되어 있으며 align-items을 center로 설정한 결과입니다. cross-axis가 세로이기 때문에 세로축에서 가운데에 정렬된 것을 확인할 수 있습니다.

 

---

지금까지 flex box의 속성들을 알아봤습니다. 위에 설명한 속성외에 flex-wrap, flex-flow 등이 있지만 현재까지 위의 속성들로 충분히 웹 페이지를 구현할 수 있었습니다. 추후에 설명한 것외의 속성들을 많이 사용하게 된다면 정리를 할 예정입니다.