인터랙티브 웹 개발 - 헤더 영역 이론

[CSS flex]

: 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

-> 1차원 레이아웃 모델로 상하 레이아웃, 방향을 좌우로 바꾸거나, 레이아웃 내 아이템간 정렬을 조정하는데에 특화된 속성

 

display : flex;

 

-> 아이템들을 담고있는 영역을 플렉스 컨테이너로 만들어줌 

 

 

[아이템을 지정하는 속성] 

1. flex-grow
2. flex-shrink
3. flex-basis

1. flex-grow

• 할당 가능한 공간의 정도 (px가 아닌 숫자)
• 형제 아이템들이 모두 동일한 flex-grow 값 = 동일한 공간
• 형제 아이템들이 다른 flex-grow 값 = 다른 공간

 

2. flex-shrink

• 아이템의 크기가 축소되는 정도 (px가 아닌 숫자)
• 아이템의 크기가 container보다 클 때 사용
• 설정된 값에 따라 크기가 축소
• flex-shrink : 0 = '줄어들지 않겠다' 라는 의미

 

3. flex-basis

• 아이템의 초기 크기 지정 (해당 축의 크기 의미)
• 축이 가로방향이면 basis = 너비
• 축이 세로방향이면 basis = 높
• 'auto가 아닌 flex-basis'와 'width(direction: column이면 height)’ 중 flex-basis가 우선  

 

-> 아이템의 각각의 사이즈와 늘어나고 줄어드는 정도 지정가능

한번에 축약형으로

flex : grow shrink basis

 

선언 가능!

 

[아이템을 담는 컨테이너에 지정하는 속성]

1. 방향
2. 정렬

 

1. 방향 flex-direction

• row : 가로방향 배치
• column : 세로 방향 배치
• row-reverse : 가로방향 역순 배치
• column-reverse : 세로방향 역순 배치

 

2. 정렬 justify-content (메인축 정렬 지정), align-items (교차하는 축 정렬 지정)

• flex-start : 처음에 정렬
• flex-end : 끝쪽으로 정렬
• center : 가운데 정렬
• space-between : 아이템 간격 일정하게 정렬
• space-around : 아이템 간격 일정하게 정렬 + 아이템과 컨테이너 간의 간격을 아이템간 간격의 절반으로 유지