CSS flexbox 톺아보기 - 1. 부모 요소 속성
효과적으로 레이아웃을 배치할 수 있는 flexbox 속성을 알아보자
Flexbox는 브라우저의 크기 혹은 요소의 크기가 동적이거나 명시되지 않은 경우에 문서 내의 공간에 대한 배치, 정렬 및 분산을 효율적으로 작업할 수 있게 돕는 CSS 모듈입니다. 단순하게 말하자면 반응형 웹과 같이 레이아웃의 유연성이 요구되는 상황에서 필요한 모듈이라고 볼 수 있죠.
인터넷 익스플로러 11부터 사용이 가능하기 때문에 이전 버전을 지원하기 위해서는 벤더 프리픽스를 사용해야 했으나, MS에서 올 해부터 ie11 및 하위 버전에 대한 지원을 중단한다고 발표했으므로 마음껏 사용해도 될 것 같습니다.
출처 : w3schools css3 flexboxFlexbox 모든 속성 살펴보기
설명에 들어가기 앞서 Flexbox의 속성들을 간략하게 표로 정리하면 다음과 같습니다.
표에서도 알 수 있듯이 Flexbox 속성은 크게 박스들을 감싸고 있는 부모 요소에 적용하는 속성과, 그 안에 개별적인 자식 요소들에게 적용하는 속성으로 분류할 수 있습니다.
만약 위와 같이 HTML태그가 짜여있다면 ul에 적용하는 속성들을 의미하죠. 지금 포스팅인 1부에서는 부모 요소 속성, 2부에서는 자식 요소의 속성에 대해 정리해보고자 합니다.
부모 요소 속성
부모 요소 속성은 크게 flexbox를 사용할지 정의하는 속성(display), flexbox의 옵션 값을 설정하는 속성(flex-direction, flex-wrap, flex-flow), 마지막으로 실질적으로 flex 위치를 지정하는 속성(justify-content, align-items, align-content) 등이 있습니다. 먼저 정의부부터 살펴볼까요?
display
display는 해당 요소를 flexbox로 정의할지 설정하는 속성입니다.
flex는 display: block처럼 너비를 100%로 설정하는 반면 inline-flex는 display: inline처럼 자식 요소들의 크기에 맞춰 너비 값이 변경됩니다.
ul {
display: flex;
/* or inline-flex */
}
flex-direction
flex-direction은 flex가 진행될 방향을 설정하는 속성입니다. 주의해야 할 점은 아랍어권과 같이 텍스트가 좌 ← 우로 읽히는 환경에서는 기본 direction이 rtl로 설정되어 있기 때문에 flex 또한 이를 고려해서 설정해야 합니다.
ul {
flex-direction: row | row-reverse | column | column-reverse
}
row (defalut) : ltr 환경에선 좌 → 우, rtl 환경에선 좌 ← 우
row-reverse : ltr 환경에선 좌 ← 우, rtl 환경에선 좌 → 우
column : 위 → 아래
column-reverse : 아래 → 위
flex-wrap
flex-warp은 부모 요소의 공간이 자식 요소의 너비를 더 이상 포함할 수 없을 때, 한 줄로 유지할 것인지 여러 줄로 분리할 것인지 정하는 속성입니다.
ul {
flex-wrap: no-wrap | wrap | wrap-reverse;
}
no-wrap (default) : 모든 자식 요소를 한 줄로 유지
wrap : 자동으로 여러 줄로 분리 (위 → 아래)
wrap-reverse : 자동으로 여러 줄로 분리 (아래 → 위)
flex-flow
위에서 설명한 flex-direction과 flex-wrap 값을 합친 약칭 속성입니다. 속성 값의 앞에는 direction값, 뒤에는 wrap값을 작성합니다.
ul {
flex-flow: row no-wrap; /* default */
}
justify-content
자식 요소의 x축을 정렬하기 위해 사용하는 속성입니다. 다만 flex-direction이 column, 즉 세로로 정렬을 할 경우 justify-content 또한 방향을 바꾸어 x축이 아닌 y축을 정렬합니다.
ul {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start (default) : 시작점으로 정렬
flex-end : 끝점으로 정렬
center: 중앙 정렬
space-between: 자식 요소 첫 번째 요소와 마지막 요소는 양 끝에 배치하고, 사이에 있는 여백을 균등하게 분배
space-around: 모든 요소의 좌우 여백을 균등하게 분배
space-evenly: 모든 여백을 균등하게 분배
space-around와 space-evenly의 경우 요소의 좌우 여백이 대상인지, 아니면 여백 자체가 대상인지에 따라 너비가 분배되는 것을 확인할 수 있습니다.
align-items
자식 요소의 y축 정렬을 정의하는 속성입니다. justify-content와 마찬가지로 flex-direction이 column일 경우 align-items는 역으로 x축을 정의합니다.
ul {
align-items: flex-start | flex-end | center | stretch | baseline;
}
flex-start : 시작점으로 정렬
flex-end : 끝점으로 정렬
center : 중앙 정렬
stretch (default) : 부모 요소의 높이에 맞춰 늘어남 (단, 자식 요소의 높이값이 지정되지 않은 경우)
baseline : 폰트의 기준선에 맞춰 정렬
baseline의 경우 모든 요소의 스타일이 같을 경우 flex-start와 동일하게 보이나, font-size가 제각각인 경우 폰트의 기준선에 맞춰 정렬됨을 확인할 수 있습니다.
align-content
align-items가 자식 요소 각각의 세로 정렬을 정의했다면, align-contents는 flex 된 요소들이 여러 줄 일 경우 행간의 여백을 정의하는 속성입니다.
ul {
align-content: flex-start | flex-end | center | space-between | space-around | stretch
}
flex-start : 부모 요소의 시작점에 맞춰 정렬
flex-end : 부모 요소의 끝점에 맞춰 정렬
center : 부모 요소의 중앙에 맞춰 정렬
space-between : 첫째 줄은 최상단, 마지막 줄은 최하단에 배치되고 남은 여백을 균등하게 분배
space-around : 모든 줄의 상하 여백을 균등하게 분배
stretch (default) : 부모 요소의 높이에 맞춰 늘어남 (단, 자식 요소의 높이값이 지정되지 않은 경우)
마무리
오늘은 css의 레이아웃 스타일링에 꼭 필요한 개념 flexbox에 대해 알아봤습니다. 특히 반응형 레이아웃 작업에 있어 유연하게 스타일을 잡을 수 있게 도와주는 속성이기 때문에 한 번 공부하시는 것을 추천드립니다.
그럼 다음 시간에는 자식 요소 속성에 대해 알아보겠습니다.
