05-1 부모 요소에 flex 적용하기

속성명	속성값	설명
display	flex	자신은 블록 속성을 유지하면서 자식 요소에 flex 환경 설정
	inline-flex	자신을 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정
flex-direction	row	flex의 기본축을 가로로 지정
	column	flex의 기본축을 세로로 지정
	row-reverse	자식 요소 콘텐츠를 가로 역순으로 정렬
	column-reverse	자식 요소 콘텐츠를 세로로 역순으로 정렬
flex-wrap	nowrap	자식 요소의 줄바꿈을 하지 않는다
	wrap	자식 요소의 줄바꿈을 한다
flex-flow	row wrap	flex-direction과 flex-wrap 속성의 축약문

국외에서는 float 속성을 이용한 레이아웃 제작 방식은 비표준 기술, 하지만 국내에서는 HTML5 이전의 방식으로 제작된 웹 사이트를 유지보수 하기 위해 float 속성을 활용한 레이아웃 작업이 더 많다.

display - 자식요소의 배치 방법 지정하기

flex-direction - 자식 요소의 정렬 방향 변경하기

flex-wrap - 자식 요소에 줄 바꿈 적용하기

flex-flow - flex-direction, flex-wrap 속성을 한꺼번에 적용하기

05-2 자식 요소 정렬하기

justify-content - 기본 축으로 정렬하기

속성명	속성값	설명
justify-content	flex-start	자식 요소를 시작 방향으로 정렬
	flex-end	자식 요소를 종료 방향으로 정렬
	center	자식 요소를 가운데로 정렬
	space-between	자식 요소들의 좌우 사이 여백만 균일하게 배분해서 정렬
	space-around	자식 요소들의 여백을 균일하게 배분해서 정렬
	space-evenly	자식 요소들의 여백을 양끝까지 균일하게 배분해서 정렬

flex-start - 자식 요소를 시작 방향으로 정렬하기

flex-end - 자식 요소를 종료 방향으로 정렬하기

center - 자식 요소를 가운데 방향으로 정렬하기

space-between - 자식 요소의 좌우 사이 간격을 균일하게 배치하기

space-around - 자식 요소의 기본 축 방향으로 주위 간격을 균일하게 배치하기

space-evenly - 자식 요소의 기본 축 방향으로 주위 간격을 균일하게 배치하기

• space-around은 양쪽 끝 간격을 합치면 중간 간격, space-evenly은 한쪽 끝 간격이 중간 간격과 같다

align-content, align-items - 반대 축으로 정렬하기

• 자식요소가 여러 개라서 줄바꿈이 필요할 때는 align-content, 1개이거나 줄 바꿈이 필요없다면 align-items 사용

속성명	속성값	설명
align-content 또는 align-items	flex-start	자식 요소를 시작 방향으로 정렬
	flex-end	자식 요소를 종료 방향으로 정렬
	center	자식 요소를 가운데로 정렬
	space-between	자식 요소들의 좌우 사이 여백만 균일하게 배분해서 정렬
	space-around	자식 요소들의 여백을 균일하게 배분해서 정렬
	space-evenly	자식 요소들의 여백을 양끝까지 균일하게 배분해서 정렬

05-3 자식 요소의 순서 지정하기

05-4 요소의 여백 비율 지정하기

flex-grow - 요소의 안쪽 여백 확대하기

flex-grow는 전체 영역의 크기를 조절하지 않는다.

flex-shrink - 요소의 안쪽 여백 축소하기

• 브라우저 화면이 기본 너빗값보다 줄어들었을 때 감소한 비율 확인 가능