CSS | 6-1. 레이아웃 Flex

1. table (전설 속에 존재)
2. float, inline-block
3. Flex
4. Grid

레이아웃 태그는 위와 같이 발전해 왔습니다. 언젠가는 float, inline-block도 전설 속의 태그가 될 수도 있어요. 그렇다고 Grid만 쓰기에는 Flex만 가능한 기능들이 있기 때문에 우리는 Flex와 Grid를 둘 다 배워야만 합니다.

<div class="container">
	<div class="item"> item1 </div>
	<div class="item"> item2 </div>
	<div class="item"> item3 </div>
</div>

기본구조는 컨테이너 안에 아이템들이 배치되어 있는 구조입니다. 이어서 컨테이너와 아이템에 적용하는 속성들을 알아볼게요.

.container {
	display: flex;
	/* display: inline-flex; */
}

메인축 : 아이템이 배치된 방향의 축
교차축 : 메인축과 수직인 축

1. dispaly : flex — 아이템들이 각자 가지고 있는 width만큼 가로 방향으로 배치됩니다. height는 컨테이너 높이만큼 늘어납니다.

2. display : inline-flex — inline-block처럼 작동합니다.

3. flex-direction : row | column | row-reverse | column-reverse — 위에서 말한 축의 방향을 결정합니다.

4. flex-wrap : nowrap | wrap | wrap-reverse — 한 줄에 다 담지 못하는 경우 줄바꿈 처리 입니다.

5. flex-flow : row wrap — flex-direction: row와 flex-wrap: wrap 을 합친 것입니다.

7. align-items : stretch | flex-start | flex-end | center | baseline — 수직축 방향으로 아이템들을 정렬하는 속성

1. flex-basis : auto | % | px | rem | content — flex 아이템의 기본 크기

2. flex-grow : 0 | 1 — 유연하게 늘리기

3. flex-shrink : 유연하게 줄이기

4. flex : — flex-grow, flex-shrink, flex-basis 한 번에 쓸 수 있는 축약형

6. order : — 시각적 나열 순서를 결정

7. z-index : — z축 정렬, 숫자가 클 수로 위로

관련포스트

저작자표시

바이트비트