CSS Flexbox 레이아웃 예제와 튜토리얼

CSS Flexbox는 현재 가장 인기 있는 웹 디자인 레이아웃 기법 중 하나이다. Flexbox는 요소를 배열하고 정렬하는 간단하고 직관적인 방법을 제공한다. 이 기법은 다양한 화면 크기와 장치에 걸쳐 일관된 레이아웃을 제공하는 데 도움이 된다. 이 튜토리얼에서는 Flexbox의 기본 원리와 예를 설명할 것이다. 이 튜토리얼은 Flexbox를 처음 배우는 사람들에게 적합하다.

[목차]
Flexbox란 무엇입니까?
Flexbox 속성
Flexbox 예제
결론

Flexbox란 무엇입니까?

플렉스박스는 요소를 배열하고 정렬하기 위한 CSS 레이아웃 모델이다. 플렉스박스는 컨테이너 요소와 컨테이너 요소의 자식 요소인 아이템 요소로 구성된다. 컨테이너 요소는 플렉스박스 레이아웃의 부모 요소이고, 아이템 요소는 자식 요소이다.

플렉스박스에서 가장 중요한 개념은 축이다. 플렉스박스는 주축(수평축)과 십자축(수직축)의 두 축을 가지며, 요소들은 이 축들을 기준으로 배열 및 정렬된다.

Flexbox 속성

Flexbox 레이아웃을 생성하려면 다음 Flexbox 속성을 사용해야 합니다:

display

Flexbox를 사용하려면 부모 요소에 대해 display: flex; 속성을 지정해야 합니다. 이 속성은 요소를 Flexbox 컨테이너로 지정합니다.

justify-content

justify-content 속성은 원소들을 주축(가로축)을 따라 정렬시킨다. 이 속성은 중심, 플렉스-스타트, 플렉스-엔드, 스페이스-사이, 스페이스-어라운드 등 다양한 값을 가질 수 있다.

align-items

align-items 속성은 요소들을 가로축(세로축)을 따라 정렬합니다. 이 속성은 center(중심), flex-start(플렉스-엔드), flex-end(플렉스-엔드), stretch(스트레치), baseline(베이스라인) 등 다양한 값을 가질 수 있습니다.

flex-direction

플렉스 방향 속성은 원소들이 배열되는 방향을 설정한다. 이 속성은 로우, 로우-리버스, 컬럼, 컬럼-리버스 등 다양한 값을 가질 수 있다.

flex-wrap

flex-wrap 속성은 요소가 상위 요소를 초과할 때 새 줄로 감쌀 것인지 여부를 설정한다. 이 속성은 nowrap, wrap, wrap-reverse와 같은 다양한 값을 가질 수 있다.

flex-flow

flex-flow 속성은 flex-direction과 flex-wrap 속성을 동시에 지정하는 데 사용됩니다.

align-content

align-content 속성은 선이 여러 개 있으면 선을 가로축(세로축)으로 정렬한다. 이 속성은 flex-start, flex-end, center, space-between, space-around, stretch 등 다양한 값을 가질 수 있다.

order

order 속성은 요소의 순서를 변경합니다.

flex

'flex' 속성은 'flex-grow', 'flex-shrink', 'flex-basis' 속성을 함께 지정하는 데 사용됩니다.

Flexbox 예제

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: #3498db;
  color: #fff;
  font-size: 2em;
  padding: 1em;
  text-align: center;
  margin: 0.5em;
}

위의 예는 Flexbox를 사용하여 요소를 여러 줄로 중앙 정렬하고 감는 방법을 보여준다. justify-content: space-around;와 align-items: center; 속성은 요소를 주축과 십자축을 따라 중앙 정렬하는 데 사용된다. flex-wrap: wrap; 속성은 요소를 여러 줄로 감는 데 사용된다. flex-basis: 30%; 속성은 요소의 크기를 지정하는 데 사용된다.

 

[코딩 내용 추가]

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  background-color: #3498db;
  color: #fff;
  font-size: 2em;
  padding: 1em;
  text-align: center;
  margin: 0.5em;
  flex-basis: 30%;
}

결론

CSS Flexbox는 요소를 쉽게 배열하고 정렬할 수 있게 해주는 강력한 도구입니다. 이 자습서에서는 Flexbox의 기본 원리와 예를 살펴 보았습니다. Flexbox를 사용하면 다양한 화면 크기와 장치에 걸쳐 일관된 레이아웃을 제공할 수 있습니다. Flexbox를 사용하여 다양한 웹 디자인을 구현해 보십시오!

[인기글]

PyQt6-QTabWidget-기본-구성-python

PyQt6 QTabWidget 기본 구성 (python)

Python-Tkinter-Canvas-사용법-및-예제

Python Tkinter Canvas 사용법 및 예제

CSS-그리드-레이아웃과-반응형-이미지

CSS 그리드 레이아웃과 반응형 이미지