flex deep dive

내가 헷갈려하는 flex에 대한 부분을 정리해봤다.

 

inline-flex

CSS display: flex 그리고 inline-flex

 

flex-flow

.item {
	display: flex;
	/* flex-direction flex-wrap */
	flex-flow: flex-col wrap;
}

 

align-self

교차축 방향으로 박스를 개별적 배치할 수 있게 해주는 속성

속성명	속성값	적용요소
align-self	auto stretch flex-start flex-end center baseline	flex 박스

auto : flex속성이 적용된 요소 (주로 부모박스)의 align-items 속성값을 상속 받음. 부모박스에 적용된 속성값이 없으면 stretch 속성값 적용

 

order

박스의 배치 순서를 자유롭게 바꿀수 있음

속성명	속성값	적용요소
order	0(기본값) 정숫값	flex 아이템

 

플렉스 아이템의 크기 늘이고 줄이기

속성명	속성값	적용요소
flex	[flex-grow] [flex-shrink] [flex-basis] 0(기본값) 1(기본값) auto(기본값) 0 1 auto (기본값) 0 auto (위와 동일) initial (위와 동일) auto (1 1 auto) none (0 0 auto)	flex 아이템

flex-grow

: flex박스에 여백이 존재할 때 flex아이템 크기를 늘릴수 있는 속성

(음수값 사용 ❌, width / flex-basis속성값에 따라 늘어나는 크기가 변할 수 있음)

flex-shrink

: flex박스 안의 flex아이템 크기가 넘칠 때 flex아이템 크기를 줄일 수 있는 속성

(음수값 사용 ❌, 속성값은 비율로 설정, width / flex-basis속성값에 따라 늘어나는 크기가 변할 수 있음)

 

📌 최소한으로 줄어들도록 하려면
min-width: 0, min-height: 0, overflow: hidden(visible 제외한 속성) 으로 설정해주면 된다. 

📌 고정폭을 사용하고 싶으면
flex-shrink : 0 을 부여하고, width에 고정크기값을 주면된다.

flex-basis

: flex아이템의 기본 크기를 설정하기 위한 속성, width속성의 모든 값을 사용 가능, 음수값 사용 ❌

📌 0 으로 설정시
flex아이템에 flex-grow, flew-shrink 속성값에 설정한 비율 그대로 적용
화면 비율에 따라 유연하게 늘이거나 줄이거나 할 수 있음

📌 auto로 설정시
flex아이템이 기본적으로 가지고 있는 크기 기준으로 flex-grow, flew-shrink 속성값에 설정한 비율 적용