10분 테코톡 - Flex Layout

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

 

| Layout

HTML, CSS에서 문서 위에 상자를 적절한 위치에 배치하는 방법을 의미

​

html에 요소를 배치하는 방법

normal flow를 따름 ( 브라우저가 기본값으로 html 페이지를 배치하는 방법 )

​

1. block

자신의 부모요소 너비를 전부 차지

새로운 블록을 추가할 시, 다음 라인이 개행(줄바꿈)되어 추가하는 형태

​

2. inline

자신의 컨텐츠 영역만큼만 너비를 차지

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

​

| Flex

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

​

flex 레이아웃을 적용하는 방법

부모의 요소에 display : flex 지정

​

용어

1. flex container

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

​

속성값

flex-direction, flex-wrap, justify-content, align-items, align-content

이를 활용해 행 또는 열 방향으로 배치하거나, 아이템들을 수평, 수직 정렬 등을 할 수 있음

​

2. flex item

flex container의 자식 요소

​

속성값

flex, flex-flow, flex-shrink, flex-basis, order, align-self

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

​

flex 두 가지 축이 존재

1. main axis : flex item들의 주요 배치 방법과 정렬 등의 기준점이 되는 축

2. cross axis : flex item들의 부차적인 정렬에 대한 기준을 담당

​

Flex 속성

1. flex container 에 적용하는 속성

→ 아이템 배치, 정렬 관련

​

1. flex-direction

main-axis축으로 방향을 결정하는 속성

1. row(default) 좌 > 우 = writing-mode : horizontal-tb / direction : ltr

2. column 상 > 하 = direction : rtl

3. row-reverse 우 > 좌 = writing-mode : vertical-lr

4. column-reverse 하 > 상

​

2. flex-wrap

item들이 container영역을 넘었을 때 어떻게 할 것인지 결정하는 속성

1. nowrap(default)

2. wrap - 새로운 줄로 배치

3. wrap-reverse

​

3. justify-content

main-axis를 기준으로 item들을 정렬시키는 속성

1. flex-start(default)

2. center - 중앙정렬

3. space-around

4. flex-end

5. space-between - 동일한 간격을 유지

6. space-evenly

​

4. align-items

cross-axis축을 기준으로 item들을 정렬

1. stretch(default)

2. center(중앙정렬)

3. flext-start

4. flex-end

5. baseline

​

​5. order

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

1. 음수(main-start 쪽, 순서상 앞)

2. 0(default, 중간)

3. 양수(main-end 쪽, 순서상 뒤)

​

ex )

1. 카드 컴포넌트

문서상 뒤에 위치하지만 시각적으로는 앞으로 옮기고 싶은 경우

​

2. 반응형 헤더

모든 접속 환경에서 동일한 문서구조를 가져가지만 접속 환경에 따라 시각적으로 다르게 보여주고 싶은 경우

​

크기 조절

6. flex-basis

flex-item의 기본 크기를 설정

1. auto(default) - 컨텐츠를 차지하는 영역

2. [값] - px, %, rem, em

​

7. flex-grow

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

flex-container의 빈 공간을 비율에 따라 분배하는 방식으로 결정

1. 0(default) - 빈 영역을 채우지 x, Item크기가 늘어나지 x

2. [숫자] - 비율

​

순서

1. 컨테이너 영역의 빈 영역의 크기를 구한다 (container 영역 - 각 item의 flex-basis 크기의 합)

2. 아이템 들의 flex-grow합을 구한다

3. (빈 영역의 크기) / (flex-grow 합)을 적절하게 분배한다

​

flex-basis : auto >> 컨텐츠 크기

flex-basis : 0 >> 빈공간 계산에는 포함 x

​

8. flex-shrink

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

flex-item이 컨테이너 영역을 overflow했을 때

1. 0 - item크기가 줄어들지 x

2. [숫자] - 비율, 1 : default

​

9. flex

flex-grow, flex-shrink, flex-basis의 축약형 속성

​

10. gap

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

1. gap

2. column-gap

3. row-gap

​

Q.

​flex-basis와 width중 뭐가 더 우선순위가 높나요?

화면상에 어떤 것을 표현하나요?

flex-basis : auto => width > flex-basis

flex-basis : auto가 아닌 값 => flex-basis

min(max)-width가 존재한다면 우선순위 제일 높음

​

​flex는 어떤 박스 형태를 따르나요?

외부 환경(컨테이너) block 배치를 따르고 내부 영역은 flex formatting context를 따름

display : inline-flex를 활용하면 외부 영역 inline context를 내부 영역은 flex formatting context를 따름

​

​flex는 언제 사용하면 좋을까요?

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

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