Flexbox의 규칙 (매우중요)

css

Flexbox의 규칙 (매우중요)

FluanceiFi 2022. 9. 20. 01:44

1. 자식 element에는 어떤 것도 적지 말아야 한다. 부모 element에만 명시해야 된다.

Ex)

<body> 부모

<div></div> 자식

</body> 부모

Display:Flex;를 이용한 다양한 속성들

Justify-content: center; (중심)

Justify-content: end; (우측 끝으로)

Justify-content: start; (기본값default)

Justify-content: space-evenly; (자동 간격 정렬)

Align-item: stretch (늘어남) but 요소(element)의 높이(height)를 고정시키면 적용 안됨

Ex)

자동으로 계산해 반응형 디자인(Responsive Design)을 지원한다.

1. 주축(main axis), 교차축(cross axis)

매우중요

Justify-content = 주축에 적용된다.

Align-items = 교차축에 적용된다.

주축: 수평, 교차축: 수직 ( X ) => 수평과 수직은 바꿀 수 있다

그러나 body에 height을 주지 않으면 align-items는 작동x

Ex) height : 100vh; 에서 vh는 viewpoint height 줄임말 / 화면높이의 %를 지정

주축과 교차축을 바꾸는 법 -> Flex direction

Default -> low

Change -> column

Display:Flex; 사용시 부모와 자식 element가 생기게 되는데

자식 element에게 content를 주면 부모로 변한다.

덕분에 content도 flex의 영향을 받아 justify-content, align-items의 영향을 받을 수 있다.

EX)

이건 굳이 body(부모)가 있어야 가능한 일이 아닌 div에 content가 넣어지면 그걸로 부모, 자식 element 관계가 만들어지는 것.

Flex-direction: column-reverse, row-reverse = 축의 진행 방향을 바꿈

Position: fixed;

브라우저상 레이아웃을 고정시킨다.

위치값을 주면 기존 레이어는 무시한다.

모든것의 가장 위에 오게 된다.

Position: static; (default 값)

레이아웃이 박스를 처음 위치하는 곳에 두는 것을 말함.

Position: relative;

레이아웃을 조금씩 움직일 수 있게 한다.

레이아웃이 처음 위치하는 곳을 기준으로 옮긴다. ( top, bottom, left, right )

Position: absolute;

가장 가까운 relative(상대적인) 부모를 기준으로 이동한다.

Relative한 부모를 찾는 법

Position: relative;값을 안주면 가장 큰 범주에 있는 요소가 relative가 되지만!

Position: relative; 를 정해주면 그 요소를 기준으로 움직인다.

+2022.9.3 absolute 추가 내용

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.

( 페이지 레이아웃에 공간을 지정하지 않아 content를 입력하게 되면 입력한 content에만 공간 레이아웃이 채워진다.)