display: flex; 속성 정리 (2)

display: flex;

레이아웃 배치를 위한 전용 기능으로 고안된 기능. 인터넷 익스플로러 구 버전에서는 지원 안 되기도 함. IE 10, 11 지원.

<div class="container">
	<div class="item">box1</div>
	<div class="item">box2</div>
	<div class="item">box3</div>
</div>

위와 같이 html 구조를 설정해, box들을 가로로 나란히 병렬하고 싶을 때.

부모요소인 container에 display: flex;를 적용해 사용. container가 flex의 영향을 받는 공간이며, 그 안에 자리잡는 item들이 설정한 속성에 따라 배치됨.

 

 

***** flex 적용 속성 *****

◎ item 적용 속성

(1) flex-basis // 아이템 기본 크기 설정

flex-direction이 row일 때는 width를, column일 때는 height를 설정.

width를 설정하면 아이템이 width보다 많을 때 다음 줄로 넘기는 반면, item 내용이 설정한 flex-basis보다 많을 경우 아이템 크기만큼 늘어남. 둘 다 적용하면 width가 적용됨.

 

(2) flex-grow // 여백 나눠 가지기

flex-grow에 숫자를 적으면 여백이 같은 비율로 배분되어 부피 차지.(item의 부피가 같아지는 것 아님.)

각 아이템에 입력한 숫자만큼의 비율로 여백 부여됨. 기본값 0

 

(3) flex-shrink // flex-basis보다 작아질 수 있는지 설정

flex-grow와 함께 쓰이는 속성. item이 flex-basis 값보다 작아질 수 있는지 결정.

0보다 큰 값을 입력하면 해당 item은 flex-item보다 작아질 수 있음. 기본값 1

container의 폭을 줄여도 flex-shrink를 0으로 설정하면 설정된 width값보다 작아지지 않음.

 

(4) flex // 축약형

flex: flex-grow, flex-shrink, flex-basis;

.item {
	flex: 1;
    // flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
	flex: 1 1 20%;
    // flex-grow: 1; flex-shrink: 1; flex-basis: 20%;
	flex: 1 auto;
    // flex-grow: 1; flex-shrink: 1; flex-basis: auto;
    // flex-basis 표기 생략시 0%로 설정됨
}

+) 영역 차제로 정확한 비율로 크기를 배분하고 싶다면 flex-basis를 0으로 설정하면 유용함.

 

(5) align-self // 교차축으로 아이템 정렬

align-item이 전체 item에 적용하는 정렬 설정이라면 align-self는 해당 아이템만 적용하는 정렬 속성. 기본값 auto.

기본적으로 align-item의 설정을 상속 받음. align-item보다 우선권 있음.

 

(6) order // 나열 순서

각 아이템의 배치 순서를 결정. 시각적으로 바꾸는 것일 뿐 html 자체가 바뀌는 건 아님. 작은 숫자일수록 먼저 배치.

 

(7) z-index // Z축 정렬

Z축(화면을 보는 사람으로부터 얼마나 떨어져 있는지 정도) 정렬. 숫자가 클수록 위에 올라옴.