flex layout

📖 flex layout

한 방향 레이아웃 시스템(1차원)

 

 

1. 컨테이너에 Display: flex; 를 설정하는 것으로 시작

속성명	속성값	설명
display	inline
	block
	inline-block
	flex

* display는 상위 개념 / flex-direction은 하위 개념

   ex) display: flex; 로 전체 구성을 flex 선언했지만, 일부는 세로 정렬(flex-direction: column;)하고 싶을 때 

 

 

2. flex 컨데이너에 적용하는 속성; 전체 아이템에 적용됨

속성명	속성명 한꺼번에 지정	속성값	설명
flex-direction (배치 방향)	flex-flow (방향 · 줄넘김 동시 선언)	row row-reverse column column-reverse
flex-wrap (줄넘김 처리)		no-wrap wrap wrap-reverse
justify-content (주축 방향 정렬)	-	flex-start flex-end center space-between space-around space-evenly
align-items (교차축 방향 정렬)	-	stretch flex-start flex-end center baseline
align-content (행 2개 이상일 때 정렬)	-	stretch flex-start flex-end center space-between space-around space-evenly

3. flex 아이템에 적용하는 속성; 해당 아이템에 적용

속성명	속성명 한꺼번에 지정	속성값	설명
flex-grow (flex 아이템을 유연하게 늘림)	flex (flex-grow, flex-shrink, flex-basis 동시 선언) ex) flex: 2 1 0         flex: 1 = flex 1 1 0	단위X, 상수O	지정된 상수의 비율로 flex-basis를 제외한 여백부분's 크기를 늘림 / 기본값 0
flex-shrink ( flex 아이템을 유연하게 줄임)		단위X, 상수O	지정된 상수의 비율로 flex-basis를 제외한 여백부분's 크기를 줄임 / 기본값 1 ex) flex-shrink: 0; → 컨테이너가 아무리 작아져도 아이템의 크기가 flex-basis보다 작아지지 않음
flex-basis (flex 아이템의 기본 크기)		width, height에 사용되는 모든 단위 사용 가능 * flex-direction : row → 너비 * flex-direction : column → 높이	ex) flex-basis: 100px;      → 원래 width가 100px이 안되는 아이템의 너비가 100px로 늘어남 & 원래 100px이 넘는 아이템은 그대로 유지됨 cf) width: 100px;      → 원래 width가 100px이 넘든, 넘지 않든 모든 아이템의 너비를 100px로 맞춤. 이 때 넘치는 text는 word-wrap: break-word;
align-self (개별항목의 교차축 방향 정렬)	-	stretch flex-start flex-end center baseline
order (배치 순서)	-	단위X, 상수O
z-index (z축 정렬)		단위X, 상수O

 

 

 

 

 

출처 : https://studiomeal.com/archives/197