메인페이지

row nowrap에 대해

펼쳐보기
H
T
M
L

row nowrap+align-items

펼쳐보기

no wrap 단일행인 경우, 반대축 정렬하는 방법은 align-items를 사용.

H
T
M
L

row nowrap 'flex-grow: 1;'적용

펼쳐보기
H
T
M
L

row warp에 대해

펼쳐보기

래핑 효과를 확인해보려면 부모 요소가 작아지도록 브라우저의 크기를 줄여서 확인해야함.

H
T
M
L

row warp+align-content!

펼쳐보기

반대축 방향으로 정렬시 align-content 속성을 사용.

H
T
M
L

space-evenly

펼쳐보기

justify-content는 부모요소의 공간이 많을 때 정렬(flex-direction 방향)할 때 사용

H
T
M
L

space-around

펼쳐보기
H
T
M
L

space-between

펼쳐보기
H
T