[CSS] flex(display 속성 값)

관련 포스팅 : [CSS] display 속성(property) 정리

 

 

flex 개념

요소의 크기가 불명확하거나 동적으로 변하는 경우에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식.

정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있어서 별도의 분기 처리를 줄일 수 있음.

잘 활용한다면... CSS 만으로 다양한 레이아웃을 구현 가능함!

 

 

Container(부모 요소) & Item(자식 요소)

flex에서 가장 먼저 이해해야 할 부분!

Container(부모 요소) : 'display : flex' 스타일이 설정된 요소
Item(자식 요소) : Container 요소의 하위 요소

 

Container이라는 상자 안에서, Item이 1차원 방향으로 배치된다고 이해하면 좋음

 

cross axis 방향에 대해, container의 길이 만큼 item 길이도 맞춰지게 됨 (해당 그림에선 height에 해당)

main axis : item이 배치되는 방향의 축, 기본적으로 row로 설정되어 있으며, flex-direction 속성을 통해 변경 가능함cross axis : main axis와 직교하는 축

 

 

Container 관련 속성

속성명	설명
flex-direction	- main axis(주축)의 방향 설정 - default는 row - row : item을 행 방향(인라인 방향)배치 - row-reverse : item을 역순으로 행 방향 (또는 인라인 방향)배치 - column : item을 열 방향(블록 방향)배치 - column-reverse : item을 역순으로 열 방향(블록 방향)배치
flex-wrap	- container에 요소(item)를 한 줄에 담을 여유 공간이 없을 때 줄바꿈을 어떻게 할지 결정하는 속성 - default는 nowrap - nowrap : 줄바꿈을 하지 않음 - wrap : item이 줄바꿈 처리 됨 - wrap-reverse : item이 역순으로 줄바꿈 처리 됨
flex-flow	flex-direction, flex-wrap 한꺼번에 지정 (flex-direction, flex-wrap 순으로 한 칸 공백 사용)
justify-content	- main axis(주축)을 따라 정렬 - default는 flex-start - flex-start : item을 container 시작부터 정렬, flex-direction : row - 왼쪽부터 / column - 위쪽부터 - flex-end : item을 container 끝부터 정렬, flex-direction : row - 오른쪽부터 / column - 아래쪽부터 - center : main axis 방향 기준, item을 가운데로 정렬 - space-between : item의 사이(between)에 균일한 간격을 만들어 줌 - space-around : item의 둘레(around)에 균일한 간격을 만들어 줌 - space-evenly : item의 사이와 양 끝에 균일한 간격을 만들어 줌 (IE와 엣지(Edge)에선 지원 X)
align-items	- cross axis(교차축)을 따라 정렬 - default는 stretch - stretch : cross axis 방향으로 item이 container을 꽉 채울 수 있게 늘어남 - flex-start : item을 container 시작부터 정렬, flex-direction : row - 위쪽부터 / column - 왼쪽부터 - flex-end : item을 container 끝부터 정렬, flex-direction : row - 아래쪽부터 / column - 오른쪽부터 - center : cross axis 방향 기준, item을 가운데로 정렬
align-content	- flex-wrap: wrap 이 설정된 상태에서, item 행이 2줄 이상일 때의 cross axis 정렬 방향 결정

 

 

Item 관련 속성

속성명	설명
flex	- flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성 - grow, shrink, basis 순서
flex-basis	- item의 기본 크기 설정 - default는 auto - flex-direction : row - 너비(width), flex-direction : column - 높이(height) - auto : 아이템 자신의 width 또는 height 속성의 값을 사용 - 0 : 여백이 100%가 됨, main axis에서 item 크기와 관계 없이 flex-grow, flex-shrink 비율대로 배분 - 0 이외의 숫자(px) : 화면 상의 절댓값처럼 설정됨
flex-grow	- main axis에서 여백이 생긴 경우, 여백에 대해 item 요소들의 분배 비율 지정 (음수 설정 불가능) - 여백 : container에서 item의 flex-basis를 제외한 부분 - default는 0 - 0보다 큰 값 세팅 시 해당 item이 Flexible하게 변함 (원래의 크기보다 커져서 빈 공간을 메움) - flex-basis : 0 인경우, 여백 100%가 되어 container 영역 전체를 사용하게 됨
flex-shrink	- main axis에서 여백이 부족한 경우, 각 item 요소들의 감소 비율 지정 (음수 설정 불가능) - 만약 container가 item을 모두 포함할 만한 공간이 부족한 상태에서 flex-shrink 값이 양수이면 flex 항목은 flex-basis에 지정된 크기보다 작아짐 - default는 1(클 수록 빠르게 줄어듦)  - flex-basis : 0 인경우, 여백 100%가 되어 container 영역 전체를 사용하게 됨
order	- 각 item의 시각적 나열 순서를 정함 - HTML 자체의 구조를 바꾸는 것은 아님

 

 

 

참고 포스팅 : 이번에야 말로 Flexbox 파헤치기 / CSS Flex 컨테이너 적용 총정리 / 이번에야말로 CSS Flex를 익혀보자