display: flex; 속성 정리 (1)

 

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 적용 속성 *****

◎ container 적용 속성

1) display: flex; // flex 선언

.container {
	display: flex;
}

가로 방향으로 배치. item들의 width는 item이 가진 내용물 만큼, height는 container의 높이만큼.

정렬의 기준이 되는 메인축은 가로축. 세로축은 교차축이라 함.

+) display: inline-flex; => inline-block처럼 동작. container의 width가 자식들 width의 총합만큼 차지. 

 

 

2) flex-direction // 배치 방향 설정

item들이 배치되는 축의 방향을 결정하는 속성. 기본적으로 가로축을 메인 축으로 함. 

.container {
	flex-direction: row;            
	// item들이 가로(행) 방향으로 배치
//	flex-direction: column;         
	// item들이 세로(열) 방향으로 배치
//	flex-direction: row-reverse;    
	// item들이 역순으로 가로 배치 ( box3, box2, box1 순)
//	flex-direction: column-reverse; 
	// item들이 역순으로 새로 배치
}

 

 

3) flex-wrap // 줄넘김 처리 설정

item의 총 width가 container의 width를 넘을 때, 줄 넘김을 어떻게 할지 설정하는 속성.

.container {
	flex-wrap: nowrap;        
	// 줄바꿈 X, 그냥 삐져 나가게 둠
//	flex-wrap: wrap;          
	// 줄바꿈
//	flex-wrap: wrap-reverse;
	// 역순으로 줄바꿈. 넘치는 박스가 위로 올라감. 안넘치는 박스들은 그대로
}

 

 

4) flex-flow

flex-direction과 flex-wrap을 한 번에 지정하는 속성.

.container {
//	flex-direction: row;
//      flex-wrap: wrap
	flex-flow: row wrap;  // direction, wrap 순으로 작성
}

 

 

5) justify-content // 메인축으로 정렬

flex-direction이 row인지 column인지에 따라 어떻게 달라지는지 확인.

.container {
	justify-content: flex-start;     
	// 기본값. 시작점 기준으로 정렬(row=왼쪽/column=위쪽)
//	justify-content: flex-end;       
	// 끝점 기준으로 정렬(row=오른쪽/column=아래쪽)
//	justify-content: center;         
	// 가운데로 정렬
//	justify-content: space-between;  
	// item들 사이에 균일한 간격 생성
//	justify-content: space-around;   
	// item 둘레에 균일한 간격 생성
//	justify-content: space-evenly;   
	// item 사이와 양 끝에 균일한 간격 생성
}

 

 

6) align-items // 교차축으로 방향 정렬

.container {
	align-items: stretch;     
	// 기본값. 교차축 방향으로 item이 끝까지 부피 차지
//	align-items: flex-start;  
	// 시작점 기준 정렬 (row=위쪽/column=왼쪽)
//	align-items: flex-end;    
	// 끝점 기준 정렬 (row=아래쪽/column=오른쪽)
//	align-items: center;      
	// 가운데 정렬
//	align-items: baseline;    
	// item안에 들어있는 택스트 베이스라인 기준으로 정렬
}

 

**) 아이템 중앙정렬을 위해 justify-content: center; / align-items: center; 를 같이 사용하는 경우가 잦다!

 

 

7) align-content // 여러 행 교차축 방향 정렬

flex-wrap: wrap;이 설정된 상태에서 item들이 2줄 이상 차지하게 되었을 경우 교차축 방향 정렬을 결정.

.container {
	flex-wrap: wrap;
	align-content: stretch;       
	// 같은 비율로 행이 너비를 꽉 채우게 늘어남
//	align-content: flex-start;    
	// 모든 행들이 시작점에 붙음
//	align-content: flex-end;      
	// 모든 행들이 끝점에 붙음
//	align-content: center;        
	// 모든 행들이 가운데 정렬
//	align-content: space-between; 
	// 행 들 사이에 같은 비율로 여백
//	align-content: space-around;  
	// 행들 주위에 같은 비율로 여백
//	align-content: space-evenly;  
	// 양 끝과 행 사이에 같은 비율로 여백
}