CSS 기본기 다지기

모든 내용은 1분코딩 을 참고한다.

1. display: flex

Flex 컨테이너의 시작은 display: flex;다.

기본적으로 아이템들이 가로(row) 방향으로 배치되며, 각 아이템은 내용물의 width만큼만 차지한다. height는 컨테이너 높이에 맞춰 늘어난다.

Flex Item 1

Flex Item 2

Flex Item 3 #############

2. flex-direction

아이템이 배치되는 축 방향을 결정한다.

row (기본) : 가로 → 방향
row-reverse : 가로 ← 방향
column : 세로 ↓ 방향
column-reverse : 세로 ↑ 방향

AAAAAAAAAAAA

BBB

CCCCCCC

3. flex-wrap

줄바꿈 처리 여부를 정한다.

nowrap (기본) : 줄바꿈 안 함, 넘치면 삐져나감
wrap : 줄바꿈 함
wrap-reverse : 줄바꿈 + 역순 배치

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

4. flex-flow

flex-direction과 flex-wrap을 한 줄로 지정하는 축약형.

.container {
  flex-flow: row wrap;
  /* flex-direction: row; */
  /* flex-wrap: wrap; */
}

5. justify-content

메인축 방향 정렬.

flex-start (기본) : 시작점 정렬
flex-end : 끝점 정렬
center : 가운데 정렬
space-between : 사이 간격 균등
space-around : 둘레 간격 균등
space-evenly : 모든 간격 균등 (IE/Edge 미지원)

Item 1

Item 2

Item 3

Item 4

아이템들을 시작점으로 정렬합니다.

6. align-items

수직축 방향 정렬.

stretch (기본) : 끝까지 늘림 (height 미지정 시)
flex-start : 위쪽 정렬
flex-end : 아래쪽 정렬
center : 수직 가운데
baseline : 텍스트 기준선 맞춤

Item 1

Item 2

Item 3

Item 4

기본값입니다. 아이템의 높이를 컨테이너 높이에 맞게 늘립니다.

7. align-content

여러 줄(행)일 때의 수직축 방향 정렬.

flex-wrap: wrap; 상태에서만 동작.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

줄들을 컨테이너의 시작점(위쪽)으로 정렬합니다.

8. 아이템 속성

flex-basis : 아이템의 기본 크기
flex-grow : 남은 공간을 차지할 비율
flex-shrink : 공간 부족 시 줄어드는 비율
flex : grow shrink basis 축약형
align-self : 개별 아이템 수직 정렬
order : 시각적 배치 순서
z-index : Z축(위/아래) 배치

flex-basis

Item 1

Item 2

Item 3

flex-basis는 flex-direction의 주축(main axis) 크기를 결정합니다.
row → 너비 기준
column → 높이 기준

flex-grow

Item 1

Item 2

Item 3

flex-grow는 주축(main axis)에서 남는 공간을 얼마나 차지할지 비율로 결정합니다.
row → 가로 기준 / column → 세로 기준

flex-shrink

100px

grow: 1

grow: 2

컨테이너 크기가 줄어들어도 첫 번째 아이템은 폭 100px을 유지하며 줄어들지 않는다.

flex

.item {
  flex: 1;
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  flex: 2 1 0;
  /* flex-grow: 2; flex-shrink: 1; flex-basis: 0; */
  flex: 1 150px;
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 150px; */
}

flex: 1

flex: 2 1 0

flex: 1 150px

align-self

개별 아이템의 수직축 정렬을 지정한다.

align-items가 컨테이너의 모든 아이템 정렬을 제어한다면, align-self는 해당 아이템만 개별적으로 정렬한다.

기본값은 auto이며, 컨테이너의 align-items 값을 그대로 따른다.

auto

stretch

center

flex-end

flex-start

baseline

기본값입니다. 아이템의 높이를 컨테이너 높이에 맞게 늘립니다.

order

아이템의 시각적 배치 순서를 결정하는 속성이다. 숫자가 작을수록 먼저 배치된다.

단, 이는 화면에서 보이는 순서만 바꾸는 것이며, HTML 구조 자체는 변하지 않는다. 따라서 접근성 측면에서 주의가 필요하다.

order는 시각적 순서만 바꿉니다. HTML 순서는 여전히 1 → 2 → 3이므로, 스크린 리더나 키보드 포커스 순서는 변경되지 않습니다.

z-index

z-index를 사용하면 요소의 Z축(앞뒤) 순서를 조정할 수 있다. 값이 클수록 더 위에 표시된다.

빨강

초록

파랑

간단한 블로그 Open Graph 만들기

블로그를 SNS에 공유할 때 썸네일로 보여줄 Open Graph 이미지를 만들어 봤다.

이미지와 텍스트가 간단하게 배치된 형태다.

CSS Flex 기본 알기

codeByYun

실제 썸네일은 이미지 형태라 배경이 이렇게 화려하진 않지만, 나름 깔끔한 배치로 완성했다. 이제는 확실히 flex 정렬 개념이 잡힌 것 같다.