CSS flexbox 톺아보기 - 2. 자식 요소 속성
효과적으로 레이아웃을 배치할 수 있는 flexbox 속성을 알아보자
지난 포스트에서 flexbox 속성 중 부모 요소에 적용되는 속성들을 정리했다면, 이번 포스트에서는 자식 요소에 적용하는 속성에 대해 알아보겠습니다.
자식 요소 속성
order
자식 요소 간 순서를 정의하는 속성입니다. 기본값은 0이며 z-index와 동일하게 값이 작아질수록 최상단에 위치합니다.
li {
order: 0; /*default*/
}
flex-grow
부모 요소에 여분의 공간이 있을 때, 자식 요소의 너비를 확장할 것인지 아닌지 정의하는 속성입니다. 기본값인 0일 땐 너비를 확장하지 않으며, 0보다 큰 숫자를 입력할 경우 너비를 확장합니다. 또한 숫자가 크면 클수록 상대적으로 너비를 더 크게 가져갈 수 있습니다.
li {
flex-grow: 0/* default */ | 임의의 정수 값;
}
flex-shrink
flex-grow속성과 반대로 부모 요소에 여분의 공간이 없을 때 자식 요소의 너비를 축소하는 속성이다. 기본값은 1이고, 0이면 줄어들지 않고 본인의 너비 값을 그대로 유지하며, 1보다 큰 숫자를 입력하면 숫자가 클수록 더 많이 축소합니다.
li {
flex-shrink: 1 /* default */ | 임의의 정수 값;
}
flex-basis
자식 요소들의 기본 너비를 정의합니다. 부모 요소의 크기에 따라 자동으로 변경되는 auto가 기본값이며 px, em, % 와 같은 임의값를 지정하면 해당 값만큼 요소들의 크기가 설정됩니다.
li {
flex-basis: auto /* default */ | px, em, %...;
}
flex
flex-grow와 flex-shrink, 그리고 flex-basis의 값을 합친 약칭 속성입니다. 첫 번째 flex-grow를 제외한 나머지 속성은 생략이 가능합니다.
li {
flex: 0 1 auto /* default */ | none
}
align-self
부모 요소의 align-items 속성과는 무관하게 개별적으로 세로 정렬 값을 정의할 수 있습니다.
li {
align-items: auto | flex-start | flex-end | center | baseline | stretch;
}
auto (default) : 부모 요소의 속성에 따라 자동 정렬
flex-start : 시작점으로 정렬
flex-end : 끝점으로 정렬
center: 중앙 정렬
stretch : 부모 요소의 높이에 맞춰 늘어남 (단, 자식 요소의 높이값이 지정되지 않은 경우)
baseline : 폰트의 기준선에 맞춰 정렬
마무리
오늘까지 해서 css flexbox 모듈의 속성들을 알아봤습니다. 사실 실제 작업을 할 때는 일부 속성만 사용하게 되는지라 저도 이번 포스팅을 통해 한 번 더 개념을 잡고 갈 수 있었습니다.
그럼 오늘 포스팅은 여기서 마치겠습니다.
참고자료
A Complete Guide to Flexbox | CSS-Tricks
