FLEX

 < FLEX > 

❑ 가로배치

⇨ 부모한테 display:flex 속성을 주면 무조건 가로배치

⇨ 자식 요소한테 width값을 주면 밑으로 안 흘러 넘치게 딱 그 넓이만큼 지정됨

❑ Flex 속성 

플렉스 박스	플렉스 요소
display	order
flex-direction	align-self
justify-content	flex
align-items
flex-wrap
flow-flow
align-content

 

# 플렉스 아이템 배치 방향 설정 (= 주축 변경)

속성명 : 속성값	설명
flex-direction:row(기본값)	- 기본값으로 주축의 방향을 가로로 설정 - 요소를 주축의 시작점에서 끝점 방향으로 배치
flex-direction:row-reverse	- 요소를 주축의 끝점에서 시작점 방향으로 배치
flex-direction:column	- 주축의 방향을 세로로 설정 - 요소를 주축의 시작점에서 끝점 방향으로 배치
flex-direction:column-reverse	- 주축의 방향을 세로로 설정 - 요소를 주축의 끝점에서 시작점 방향으로 배치

➡ column은 주축이 세로로 변경된 것

 

# 플렉스 아이템 여러 줄로 배치

속성명 : 속성값	설명
flex-wrap:nowrap(기본값)	박스를 한줄로 배치, 기본값 / 아래줄로 넘기지 말아라(기본값)
flex-wrap:wrap	박스를 여러 줄로 배치 / 넘치면 아래줄로 넘겨라
flex-wrap:wrap-reverse	박스를 여러줄로 배치하되 역방향으로 배치, 주축이 가로일 때는 아래에서 위쪽으로 주축이 세로일 때는 오른쪽에서 왼쪽으로 배치

 

# 주축방향으로 다양하게 배치 (= justify-content)

❑ flex-direction:row 왼쪽부터 

❑ flex-direction:column 왼쪽부터 (오른쪽 회전)

❑ 왼쪽상단이 기준

속성명 : 속성값	설명
justify-content: flex-start	요소들을 주축으로 시작점을 정렬, 기본값
justify-content: flex-end	요소들을 주축의 끝점부터 정렬
justify-content: center	요소들을 중앙으로 정렬 (= 주축에서 가운데)
justify-content: space-between	첫번째 요소 마지막 요소는 양쪽끝으로 붙이고 나머지 요소는 동일한 간격으로 정렬
justify-content: space-around	요소들 마다의 좌우 공간을 동일하게 배치
justify-content: space-evenly (IE 11 이하에서 불가)	요소들 간의 간격을 동일하게 배치

➡ justify-content: flex-end / flex-direction:row-reverse 차이점

flex-direction:row-reverse을 적용시키면 요소의 컨텐츠 순서가 바뀜 (순번1이 제일 오른쪽부터 배치)

# 교차축 방향으로 다양하게 플렉스 아이템 배치

❑ flex-direction:row 상단부터

❑ flex-direction:column 왼쪽부터 (왼쪽 회전)

❑ 왼쪽상단이 기준

속성명 : 속성값	설명
align-items: stretch	박스를 확장해서 배치(기본값)
align-items: flex-start	박스를 교차축의 시작점에서 배치
align-items: center	박스를 교차축의 중앙에서 배치
align-items: flex-end	박스를 교차축의 끝점에서 배치
align-items: baseline	박스를 시작점에 배치되는 박스의 글자 베이스라인에 맞춰 배치.

 

# 여러줄 플렉스 아이템을 교차축 방향으로 다양하게 배치

❑ align: 교차축

⇨ Stretch가 기본값

속성명	속성값
align-content	Stretch, flex-start, flex-end, center, space-between, space-around, space-evenly

 

# 플렉스 아이템의 배치 순서 바꾸기

❑ 정수값으로는 양수, 음수 모두 사용 가능

❑ 같은 값을 지정하면 HTML태그 순서에 따라 배치됨

❑ 값이 작을수록 앞으로 배치됨

속성명	속성값
order	0(기본값), 정수값

 

# 플렉스 아이템의 크기 변경 (1)

❑ flex-basis (= 크기를 직접 지정)

flex-basis: 0; ⇨ 컨텐츠 크기 반영

flex-basis: 1; ⇨ 너비 크기 반영 (= 기본값)

❑ flex-grow (= 플렉서블 박스에 여백이 있을 때 플렉스 아이템의 크기를 늘일 수 있는 속성)

flex-grow: 0.5; ⇨ 모자른 부분 채우는 값을 50%

flex-grow: 1; ⇨ 모자른 부분 채우는 값을 100%

⇨ 속성값을 비율로 설정

❑ flex-shrink (= 플렉서블 박스 안의 플렉스 아이템의 크기가 넘칠 경우 크기를 줄일 수 있는 속성)

flex-shrink: 1; ⇨ 기본값 / 넘치는 것들을 모두 줄임

flex-shrink: 0; ⇨ 넘치는 것들을 줄이지 않음

속성명	속성값
flex	[flex-grow] [flex-shrink] [flex-basis] ex) flex: 1 1 0;  0 1 auto (기본값) 0 auto(0 1 auto와 같음) initial(0 1 auto와 같음) auto( 1 1 auto와 같음) none( 0 0 auto와 같음)

➡ 플렉스 아이템이 플렉서블 박스보다 작거나 클 경우 여백이 생기거나 넘침

➡ 다음 속성을 사용하여 늘이거나 줄이거나 또는 가변적인 박스로 설정 가능