[CSS] Flexbox 이해하기

(내가 보기 위한 지식 정리이기 때문에 불친절할 수 있습니다!)

1. 기본 지식 

 

① 중심축과 반대축

 

 

 

 

 

② Container와 item

 

Container에 적용하는 태그와 item에 적용하는 태그가 각각 다름

 

- Container: 전체 한꺼번에 적용

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

 

- item : 개별 적용

order
flex-grow
flex-shrink
flex
align-self

 

 

 

*참고: float는 이미지와 그를 둘러싸고 있는 글의 위치 변경을 위한 태그

(box를 정렬하는데 사용하지 않음)

 

 

2. CSS태그

Flexbox로 만들기 위해 해야할 첫번째

Container에 display: flex; 주기

그러면 item들이 왼쪽에서 오른쪽으로 정렬됨.

 

(①~⑥ : Container 태그 / ⑦~⑪ : item 태그)

 

① flex-direction : 가로 세로 중심축 변경

flex-direction: row;                       가로 왼쪽정렬 (기본) - 중심축이 가로, 반대축이 세로

flex-direction: row-reverse;          가로 오른쪽 정렬 - 중심축이 가로, 반대축이 세로

flex-direction: column                   세로 위쪽정렬 - 중심축이 세로, 반대축이 가로

flex-direction: column-reverse      세로 아래쪽정렬 - 중심축이 세로, 반대축이 가로

 

 

② flex-wrap : 자동줄바꿈 여부

flex-wrap: nowrap;             줄바꿈 없음(기본)

flex-wrap: wrap;                 자동 줄바꿈

flex-wrap: wrap-reverse;    자동 줄바꿈 + 거꾸로 시작

 

 

③ flex-flow : flex-direction + flex-wrap

flex-flow: column wrap-reverse;

 

 

④ justify-content: 중심축에서 정렬

justify-content: flex-start;              중심축에 따라 기본 시작위치에서 시작

justify-content: flex-end;               중심축에 따라 시작위치 반대편에서 시작

justify-content: center;                  중심축 가운데 정렬

justify-content: space-around;      각 item 들이 동일한 space를 갖게됨. 그래서 가장맨끝 item들은 끝에 space가 작은데 그이외에는 다른 item과 space가 합해져 양끝보다는 2배가 됨

justify-content: space-evenly;        양끝도 모두 같은 space를 갖도록

justify-content: space-between;     양끝 space 0 그리고 나머지 같은 space

 

 

⑤ align-content: 반대축에서 정렬

align-content: space-between;     양끝 space 0 그리고 나머지 같은 space

align-content: center;                    반대축 가운데 정렬

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
• center: 여러 줄들을 세로선 상의 가운데에 정렬
• space-between: 여러 줄들 사이에 동일한 간격
• space-around: 여러 줄들 주위에 동일한 간격
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림

 

 

⑥ align-items: 반대축에서 정렬

align-items: center;              반대축에서 가운데 정렬

align-items: baseline;           item 크기가 각각 다를 때 text에 맞춰서 정렬됨

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬
• flex-end: 요소들을 컨테이너의 바닥으로 정렬
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
• baseline: 요소들을 컨테이너의 시작 위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림

 

**align-items: center; 와 align-content:center; 의 차이**

box(item)의 크기가 각각 다를 때

align-items: center; 는 text에 맞춰서 정렬됨

align-content:center; 는 box 윗부분에 맞춰서 정렬됨

 

 

align-content는 여러 줄들 사이의 간격을 지정.

align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정

한 줄만 있는 경우, align-content는 효과를 보이지 않음.

 

 

------------------------------item-------------------------------------

 

⑦ order : 순서 변경

order: 1;      숫자별로 첫번째 두번째 세번째로 순서 변경 

 

⑧ flex-grow: 중심축 전체를 item들이 꽉 채우기

flex-grow: 1;           지정된 곳 만 중심축 전체를 꽉 채우기 위해 원래 width height 무시되고 커짐

예시) item이 3개일때 각각 1,1,2씩 지정해주면 마지막 item은 다른 두개에 비해 2배로 커짐

기본값은 0

 

 

⑨ flex-shrink: 중심축을 기준으로 화면이 작아질 때 어떤 비율로 작아질 것인가

flex-shrink: 1;        flex-grow와 정의는 비슷. shrink는 줄어들 때의 태그

예시) item이 3개일때 각각 1,1,2씩 지정해주면 마지막 item은 다른 두개에 비해 2배로 작아짐

기본값은 0

 

 

⑩ flex-basis

flex-basis: auto; (기본)

flex-basis: 60%; 각 item들을 %로 지정해주면 커지거나 줄어들 때 그 %대로 변화시킴

 

 

 

⑪ align-self : 반대축을 기준으로 item하나만 정렬가능

align-self: center;     지정한 item 하나만 center

 

 

 

 

 

 

**도움 될 만한 사이트**

- A Complete Guide to Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

 

 

 

- flexboxfroggy

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

게임을 이용하여 Flexbox의 이해를 돕는 사이트

 

 

 

 

참고: 드림코딩 유튜브