[CSS] Flexbox

와이어프레임(Wireframe)

: 와이어로 설계된 모양

단순한 선이나 도형으로 웹/앱의 인터페이스를 시각적으로 묘사한 것

레이아웃과 구조를 보여주는 용도

 

목업(Mock-up)

: 실제 작동하는 모습과 동일하게 하드코딩

 

와이어프레임> 목업> JavaScript

이 단계를 따르지 않으면 설계도 없이 건물을 짓는 것과 같다.

 

Flexbox 속성

* 부모요소에 적용

display: flex;

 

flex-direction 정렬축 정하기

- row 가로 정렬(기본값)

- column 세로 정렬

- row-reverse 가로 역순 정렬

- column-reverse 세로 역순 정렬

 

flex-wrap 줄 바꿈 설정하기

: 하위 요소 크기가 상위 요소 크기를 초과하면 줄바꿈을 할지 여부 설정

- nowrap 줄바꿈하지 않음(기본값)

- wrap 줄바꿈

- wrap-reverse 역순 줄바꿈

 

justify-content 축 수평 방향 정렬(컨텐츠 정렬 방식)

justify-content	row	column
flex-start	왼쪽 정렬	위쪽 정렬
flex-end	오른쪽 정렬	아래쪽 정렬
center	가운데 정렬	가운데 정렬
space-between	양쪽 정렬	상하 정렬
space-around	가운데+여백 정렬	가운데+여백 정렬

 

align-items 축 수직 방향 정렬(컨텐츠 정렬 방식)

align-items	row	column
stretch	채우기	채우기
flex-start	위쪽 정렬	왼쪽 정렬
flex-end	아래쪽 정렬	오른쪽 정렬
center	가운데 정렬	가운데 정렬
baseline	폰트 아래선 기준	폰트 아래선 기준

 

 * 자식 요소에 적용

flex: grow(팽창 지수) shrink(수축 지수) basis(기본 크기)

flex: 0 1 auto; 기본값

 

grow(팽창 지수)

: 요소의 크기가 늘어나야할 때 얼마나 늘어날 것인지

- 0 빈 공간이 있어도 늘어나지 않음(기본값)

- 1(비율) 상위 컨테이너에서 지정한 비율만큼 공간 차지

 

shrink(수축 지수)

: 요소의 크기가 줄어들어야할 때 얼마나 줄어들 것인지

grow와 반대로 설정한 비율만큼 박스가 작아짐

- 1 기본값

 

grow와 shrink를 동시에 사용하지 말 것

shrink는 width나 basis에 따른 비율이어서 실제 크기 예측이 어렵기 때문에

비율로 레이아웃을 지정할 경우 grow 사용(flex: grow 1 auto;)을 권장.

 

basis(기본 크기)

: grow 나 shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기

- auto 콘텐츠 크기를 기준으로 기본 크기 결정(기본값), relative flex item

12

12345

1

- 0 콘텐츠 크기와 상관 없이 기본 크기 결정, absolute flex item

12

12345

1

참고

- width와 basis가 동시에 존재하는 경우 basis가 우선

- 콘텐츠가 많아 자식 박스가 넘치는 경우 width가 정확한 크기를 보장하지 않음,

  flex-basis를 사용하지 않는다면 자식 박스가 넘치는 경우를 대비해 width 대신 max-width(최댓값 설정) 사용 가능