[html, css] flex - 반응형으로 정렬하기

[html, css] 자주 쓰는 css 선택자(selector)

[html, css] box model

[html, css] position - relative, absolute, fixed

[html, css] flex - 반응형으로 정렬하기

[html, css] margin: auto - 가운데정렬, 푸터, 헤더, 양 옆에 붙는 내비게이션

 

flex 는 내용이 방대하여 한 페이지에 다 담기 힘들지만..

내가 자주 쓰는 개념들만 간단히 정리해보려고 한다.

 

flex 는 html 요소들을 유연~ 하게 정렬하는 css 옵션이다.

얼마나 유연한지 화면 사이즈를 줄이면 알아서 자동으로 유연~하게 정렬하는 반응형도 제공한다...

사용법은 간단하다.

부모 요소에 display: flex; 를 선언해주면 자식 요소들이 유연~ 하게 정렬한다.

 

1. 가로나열, 세로나열 (flex-direction)

부모 요소에 옵션을 준다.

 

2. 가로정렬, 세로정렬 (justify-content, align-items)

부모 요소에 옵션을 준다.

 

3. 요소들 사이 간격 조정

부모 요소에 옵션을 준다.

 

4. 넘친 요소 감싸기(flex-warp)

부모 요소에 옵션을 준다.

 

5. item 크기 조정(flex-basis, flex-shrink, flex-grow)

자식 요소에 옵션을 준다.