[CSS] CSS 속성 - 배치(position), 플렉스(flex)

배치

position

요소의 위치 지정 기준

기본값 static 기준 없음

relative 요소 자신을 기준

absolute 위치 상 부모 요소를 기준

fixed 뷰포트(브라우저)를 기준

position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨

 

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.

3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임.

 

z-index

요소의 쌓임 정도를 지정

기본값 auto 부모 요소와 동일한 쌓임 정도

 

flex

display: flex;
display: inline-flex;

Flex Container의 화면 출력(보여짐) 특성

flex 블록 요소와 같이 Flex Container 정의

inline-flex 인라인 요소와 같이 Flex Container 정의

 

flex container

flex-direction

주 축을 설정

기본값 row 행축 (좌->우)

row-reverse, colunm, colunm-reverse

 

flex-wrap

Flex Items 묶음(줄 바꿈) 여부

기본값 nowrap 묶음(줄 바꿈) 없음

wrap 여러 줄로 묶음

 

justify-content

주 축의 정렬 방법

기본값 flex-start Flex Items를 시작점으로 정렬

flex-end, center

 

align-content

교차 축의 여러 줄 정렬 방법

기본값 stretch 

flext-start, flext-end, center

 

align-items

교차 축의 한 줄 정렬 방법

기본값 stretch 

flext-start, flext-end, center

 

flex items

order

Flex Item의 순서

기본값 0 순서 없음

 

flex-grow

Flex Item의 증가 너비 비율

기본값 0 증가 비율 없음

 

flex-shrink

Flex Item의 감소 너비 비율

기본값 1 Flex Container 너비에 따라 감소 비율 적용

 

flex-basis

Flex Item의 공간 배분 전 기본 너비

기본값 auto 요소의 Content 너비