[ 동영상 시청 ] Flex Layout

참고 동영상 

https://www.youtube.com/watch?v=JQ0jO3B43YQ

---

Layout [ normal flow ] 

기본적으로 HTML에 요소를 배치하는 방법은 normal flow를 따릅니다. 

normal flow 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 말합니다. 

- block 형태 

-> 자신의 부모요소 너비를 전부 차지한다. 

-> 새로운 블록을 추가할 시, 다음 라인 개행되어 추가하는 형태 

- inline 형태 

-> 부모 너비 전부를 차지하지 않고 자신의 컨텐츠 영역만큼만 너비를 차지 

-> 부모의 최대 너비를 넘지 않는 선에서 나란히 위치 

 

Flex

요소들을 행, 열 단위로 정렬하기 위한 1차원 레이아웃 

 

< Flex 용어 > 

flex container 

-> flex 아이템들의 배치나 정렬을 담당하는 역할 

flex item 

-> 자기가 차지하는 크기 및 자신들 사이의 순서를 변경할 수 있음 

main axis

-> flex item들의 주요 배치 방법과 정렬 등의 기준점이 되는 축 

cross axis 

->  flex item들의 부차적인 정렬에 대한 기준을 담당

 

< Flex 속성 >

For Flex Container 

 flex - direction 

-> main-axis의 방향을 결정하여 main-start 기준점을 잡는 속성

flex-wrap 

-> 컨테이너 영역을 overflow 했을 때, item들을 어떻게 배치할 것인가? 

justify-content 

> main축을 기준으로 flex item들을 정렬시키는 역할 

align-items

-> cross 축을 기준으로 item들을 정렬하는 역할 

 

For Flex Item 

 order 

-> main-axis를 기준으로 flex-item의 시각적 순서를 변경하는 속성 

flex-grow / flex-shrink / flex-basis 

-> item의 크기를 조절하는 속성, 기본 크기 또는 늘리거나 줄일 비율을 설정 

flex-basis : item의 기본 크기를 설정 

flex-grow : item이 늘어날 비율을 결정하는 속성 

 flex-shrink : item이 줄어드는 비율을 결정하는 속성 

flex

-> flex-grow / flex-shrink / flex-basis의 축약형 속성 

 

기타속성 

gap

-> item 사이의 간격을 설정하는 속성 from grid 

 

flex는 어제 사용하면 좋을까? 

간단한 레이아웃에 좋음. 복잡한 레이아웃은 grid를 사용하는 것이 적합

flex의 배치, 정렬, 크기 변경, 순서 변경 등과 같은 특징을 활용하기 좋은 곳