✔ 강의 내용

FlexBox

FlexBox 이전에는 position, float, table로 레이아웃을 조절했다. 하지만 작업이 매우 까다롭고 제약사항이 있어 사용하기 어려웠다.

float (이미지, 텍스트를 배치할 때 사용)

예전에는 레이아웃을 조절하는 속성이 없어서 float을 남발하는 경우가 종종 있었다.(Hack)
하지만 FlexBox가 등장하면서 float은 이미지, 텍스트를 배치하는 원래의 용도로만 사용할 수 있게 되었다.

FlexBox는 2가지를 중점적으로 보면 금방 이해할 수 있을것이다.

1. 박스(container)에 적용되는 속성과 각각의 item들에 적용되는 속성이 있다.

<Container에 적용 가능한 속성>

속성	설명
display	flex(가로 방향으로 배치)
flex-direction	row(기본값) row-reverse column column-reverse
flex-wrap	nowrap(기본값 - 화면을 줄여도 열이 바뀌지 않음) wrap(한 줄이 가득 차면 다음 줄로 넘어감) wrap-reverse
flex-flow	direction과 wrap을 줄여서 한 줄로 쓸 수 있음 ex) flex-flow: row nowrap;
	---
justify-content	메인축(수평축) 방향으로 아이템들을 정렬 flex-start flex-end center space-between space-around space-evenly
align-items	수직축 방향으로 아이템 정렬 flex-start flex-end center baseline(baseline:텍스트에 맞게 아이템들 정렬)
align-content	flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상(여러행) 되었을 때의 수직축 방향 정렬 justify-content의 값들과 동일.

<item에 적용 가능한 속성>

속성	설명
order	아이템들의 순서 “시각적" 변경 가능, 잘 사용하지 않음
flex-grow	화면의 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다
flex-shrink	container가 점점 작아질 때 어떻게 줄어드는지 지정해줌
flex-basis	아이템의 기본 크기를 설정. (flex-direction이 row일 때는 너비, column일 때는 높이) * auto(기본값), 0, 50%, 300px, 10rem, content
flex	flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성 * flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0
align-self	수직축 아이템 정렬/ auto(기본값)

2. 수직축, 수평축으로(서로 반대되는 축)

추가 자료 : [1분코딩]이번에야말로 CSS Flex를 익혀보자 (추천👍)

참고 영상 : [드림코딩] CSS FlexBox 완전정리. 포트폴리오 만드는 날까지!