Flexbox를 간단하게 만들기: CSS로 유연한 레이아웃 만들기-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

Flexbox를 간단하게 만들기: CSS로 유연한 레이아웃 만들기

Susan Sarandon

Dec 21, 2024 am 04:39 AM

Flexbox란 무엇입니까?

Flexbox는 반응성이 뛰어나고 유연한 레이아웃을 그 어느 때보다 쉽게 만들 수 있는 강력한 CSS 도구입니다. 요소 정렬, 간격 관리, 다양한 화면 크기에 대한 레이아웃 조정과 같은 작업을 단순화합니다.

이 블로그에서는 Flexbox의 기본 사항을 다루고, Flexbox의 속성이 어떻게 작동하는지 설명하고, 프로젝트에 사용할 수 있는 실용적인 예를 제공합니다. 결국에는 어떤 기기에서나 멋지게 보이는 레이아웃을 만드는 기술을 갖추게 될 것입니다. 시작해 보세요!

Flexbox vs. Grid vs. Float: 간단한 비교

CSS로 레이아웃을 만들 때 선택할 수 있는 방법에는 여러 가지가 있으며 각각의 장점이 있습니다. Flexbox, Grid, Float가 어떻게 다른지 살펴보겠습니다.

Flexbox: 유연하고 1차원적

Flexbox는 1차원 레이아웃을 위해 설계되었습니다. 행이나 열의 요소를 정렬해야 할 때 가장 효과적이므로 탐색 모음, 중앙 정렬 콘텐츠 또는 양식 요소와 같은 단순한 레이아웃에 이상적입니다.

강점:

공간의 정렬 및 분배가 용이합니다.
반응형 디자인에 적합합니다.
동적 콘텐츠를 잘 처리합니다.

사용 시기:

단일 방향(행 또는 열)으로 요소를 정렬하고 배포하는 데 사용됩니다.
사용 가능한 공간에 따라 요소를 자동으로 조정하려는 경우

그리드: 2차원 레이아웃에 강력함

그리드는 행과 열을 모두 만들 수 있는 더욱 강력한 레이아웃 도구입니다. 한 번에 한 차원만 처리하는 Flexbox와 달리 Grid는 다중 열 디자인이나 전체 페이지 레이아웃과 같은 복잡한 레이아웃을 만드는 데 적합합니다.

장점:

행과 열 모두에서 작동합니다.
여러 요소가 포함된 복잡한 레이아웃에 적합합니다.
요소 배치 및 크기 조정이 더욱 강화되었습니다.

사용 시기:

전체 페이지 그리드 또는 다중 열 디자인과 같은 복잡한 페이지 레이아웃을 만드는 데 사용됩니다.
두 차원 모두에 대한 정밀한 제어가 필요한 경우

플로트: 올드 스쿨 및 리미티드

Float은 원래 텍스트 래핑 및 레이아웃 목적으로 사용되었지만 현재는 일반 레이아웃 작업에 사용되지 않는 것으로 간주됩니다. 레이아웃을 생성할 수 있지만 플로트를 지우고 간격을 관리하기 위해 추가 작업이 필요한 경우가 많습니다.

장점:

이미지 주위에 텍스트를 배치하는 등의 특정 작업에 사용하기 쉽습니다.
모든 브라우저에서 지원됩니다.

사용 시기:

이미지 주위에 텍스트를 배치하는 등 작은 레이아웃 조정에 적합합니다.
복잡한 레이아웃이나 반응형 디자인에는 권장되지 않습니다.

참고:

Flexbox는 더 단순하고 1차원적인 레이아웃에 이상적이며 항목을 정렬하는 빠르고 유연한 방법을 제공합니다.
그리드는 2차원 레이아웃에 더 적합하며 복잡한 디자인을 더 효과적으로 제어할 수 있습니다
Float은 최신 레이아웃에 적합하지 않으므로 Flexbox 또는 Grid를 선호하므로 피해야 합니다.

Flexbox 기본 사항: 주요 속성 및 축 설명

Flexbox를 시작하려면 Flexbox의 동작을 정의하는 핵심 속성을 이해하는 것이 중요합니다. 여기에서는 가장 중요한 Flexbox 속성을 살펴보고 이러한 속성이 함께 작동하여 유연한 레이아웃을 만드는 방법을 설명합니다.

1. 디스플레이: 플렉스

display: flex 속성은 모든 Flexbox 레이아웃의 기초입니다. 이 속성을 컨테이너에 적용하면 이를 플렉스 컨테이너로 전환하고 해당 하위 요소는 플렉스 항목이 됩니다. 이를 통해 Flexbox가 제공하는 모든 강력한 정렬 및 레이아웃 속성을 사용할 수 있습니다.

작동 방식:

.container {
  display: flex;
}

로그인 후 복사

효과: 이렇게 하면 컨테이너가 플렉스 컨테이너가 되고 모든 직계 하위 항목은 이제 정렬 및 배포에 대한 플렉스박스 규칙을 따르는 플렉스 항목이 됩니다.

2. 플렉스 방향

flex-direction 속성은 플렉스 항목이 배열되는 방향을 정의합니다. 다음 네 가지 값 중 하나일 수 있습니다.

row(기본값): 항목이 가로(왼쪽에서 오른쪽)로 정렬됩니다.
열: 항목이 세로로(위에서 아래로) 정렬됩니다.
row-reverse : 항목을 가로로 배열하되 역순으로 배열합니다.
column-reverse: 항목이 수직으로 배열되지만 역순으로 배열됩니다.

예:

.container {
  display: flex;
  flex-direction: column;
}

로그인 후 복사

3. 콘텐츠 정당화

justify-content 속성은 주축(flex-direction에 의해 설정된 방향)을 따라 flex 항목을 정렬합니다. 품목 사이와 주변의 공간을 분배하는 데 도움이 됩니다.

값:
- flex-start: 항목을 컨테이너의 시작 부분에 정렬합니다.
- flex-end: 항목을 컨테이너 끝에 정렬합니다.
- center: 항목을 중앙에 정렬합니다.
- space-between: 항목 사이에 동일한 간격으로 항목을 배포합니다.
- space-around: 아이템 주위에 동일한 공간을 두고 배치합니다.

예:

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

로그인 후 복사

4. 항목 정렬
align-items 속성은 교차축(주축에 수직)을 따라 플렉스 아이템을 정렬합니다. 플렉스 방향이 행인 경우 항목의 수직 정렬을 제어하고 방향이 열인 경우 수평으로 정렬을 제어합니다.

값:
- flex-start: 항목을 교차축의 시작 부분에 정렬합니다.
- flex-end: 항목을 교차축의 끝에 정렬합니다.
- center: 항목을 교차축 중앙에 정렬합니다.
- Stretch: 항목을 늘려 컨테이너를 채웁니다(기본 동작).
- 기준선: 기준선을 따라 항목을 정렬합니다.

예:

.container {
  display: flex;
}

로그인 후 복사

주축과 교차축 이해

주축은 Flexbox가 항목을 정렬하는 기본 축입니다. flex-direction 값에 따라 가로(행) 또는 세로(열)가 될 수 있습니다.
교차축은 주축에 수직입니다. 주축이 가로(행)이면 교차축은 세로입니다. 주축이 세로(기둥)이면 교차축은 가로입니다.

flex-direction: row의 경우 주축은 가로, 교차축은 세로입니다.

flex-direction: Column의 경우 주축은 수직, 교차축은 수평입니다.

Flexbox 예제: 생성할 수 있는 간단한 레이아웃

이제 Flexbox의 기본 사항을 다루었으므로 몇 가지 간단한 예를 살펴보고 실제로 어떻게 작동하는지 살펴보겠습니다.

1. 센터링 요소
Flexbox를 사용하면 요소를 수평 및 수직으로 쉽게 중앙에 배치할 수 있습니다.

HTML:

.container {
  display: flex;
  flex-direction: column;
}

로그인 후 복사

결과:

2. 간단한 네비게이션 바 만들기
Flexbox는 가로 탐색 모음을 만드는 데 적합합니다.

HTML:

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

로그인 후 복사

결과:

3. 간단한 반응형 그리드 구축
Flexbox를 사용하면 미디어 쿼리 없이 간단한 반응형 그리드를 생성할 수도 있습니다.

HTML:

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

로그인 후 복사

결과:

이러한 예는 Flexbox를 사용하여 만들 수 있는 강력한 레이아웃 중 몇 가지를 보여줍니다. 익숙해지면 이러한 기술을 결합하여 더욱 복잡한 디자인을 만들 수 있습니다.

고급 Flexbox 기술: 중첩된 컨테이너, 주문 및 Flex-Wrap

이 섹션에서는 중첩 컨테이너, order 및 flex-wrap과 같은 몇 가지 고급 Flexbox 기능을 살펴보겠습니다. 이러한 기술을 사용하면 레이아웃을 더욱 효과적으로 제어하고 복잡한 디자인을 구현할 수 있습니다.

1. 중첩된 Flex 컨테이너
때로는 레이아웃 내에 레이아웃을 생성해야 할 수도 있습니다. Flexbox를 사용하면 Flex 컨테이너를 서로 중첩하여 더 효과적으로 제어할 수 있습니다.

HTML:

.container {
  display: flex;
}

로그인 후 복사

결과:

이 예에서 .outer-container는 플렉스 컨테이너이고 그 내부에는 두 개의 중첩된 .inner-container 플렉스 컨테이너가 있습니다. 이를 통해 기본 Flex 컨테이너 내에서 더 복잡한 레이아웃을 구축할 수 있습니다.

2. 주문을 사용하여 항목 순서 변경
Flexbox에서는 order 속성을 사용하여 항목 순서를 제어할 수 있습니다. 기본적으로 모든 항목은 HTML 위치를 기준으로 정렬됩니다. 그러나 순서를 사용하면 HTML을 수정하지 않고도 시각적 순서를 변경할 수 있습니다.

HTML:

.container {
  display: flex;
  flex-direction: column;
}

로그인 후 복사

결과:

이 예에서는 HTML에서의 항목 위치가 1-2-3임에도 불구하고 항목의 순서를 변경합니다. 주문 속성을 사용하면 항목을 시각적으로 재정렬할 수 있습니다.

3. flex-wrap을 사용하여 항목 포장 허용
flex-wrap 속성을 사용하면 공간이 충분하지 않을 때 플렉스 항목을 여러 줄로 줄 바꿈할 수 있습니다. 이는 항목을 다양한 화면 크기에 맞게 조정하려는 반응형 레이아웃에 특히 유용합니다.

HTML:

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

로그인 후 복사

결과:

이 예에서 flex-wrap: Wrap 속성을 사용하면 공간이 충분하지 않은 경우 항목을 다음 줄로 줄 바꿈할 수 있으므로 반응형 레이아웃을 만드는 데 훌륭한 도구가 됩니다.

참고:

중첩된 Flex 컨테이너: 레이아웃을 더 효과적으로 제어하려면 다른 Flex 컨테이너 내부에 Flexbox를 사용하세요.
순서: HTML 구조를 변경하지 않고 항목의 시각적 순서를 변경합니다.
Flex-Wrap: 항목이 새 줄로 넘어가도록 허용하여 반응형 레이아웃에 유용합니다.

이러한 고급 기술을 사용하면 Flexbox로 레이아웃을 구축할 때 훨씬 더 많은 유연성과 제어력을 얻을 수 있습니다.

Flexbox의 일반적인 실수와 이를 방지하는 방법

Flexbox가 강력하더라도 몇 가지 일반적인 함정으로 인해 예상치 못한 결과가 발생할 수 있습니다. 다음은 발생할 수 있는 몇 가지 실수와 이를 방지하기 위한 팁입니다.

1. 의도하지 않은 오버플로

문제:
Flex 항목의 내용이 예상대로 줄어들지 않으면 컨테이너가 넘칠 수 있습니다.

예:

.container {
  display: flex;
}

로그인 후 복사

이 예에서는 긴 텍스트가 레이아웃을 컨테이너 밖으로 밀어냅니다.

수정 사항:
flex-shrink 속성을 사용하거나 Overflow:hidden;을 추가하세요. 또는 word-wrap: break-word;.

.container {
  display: flex;
  flex-direction: column;
}

로그인 후 복사

2. 기본 여백을 고려하지 않음

문제:
브라우저는

와 같은 요소에 기본 여백을 적용하는 경우가 많습니다. 또는

이는 Flexbox 정렬을 방해할 수 있습니다.

예:

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

로그인 후 복사

기본 여백으로 인해 간격이 고르지 않아 레이아웃이 불균형해 보일 수 있습니다.

수정 사항:
CSS 재설정을 사용하여 여백을 재설정하거나 요소의 여백을 명시적으로 설정하세요.

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

로그인 후 복사

3. flex 사용: 1 동작을 이해하지 못한 채

문제:
가변 설정: 1은 항목을 동일하게 늘리거나 줄입니다. 이는 한 항목의 콘텐츠가 다른 항목보다 훨씬 큰 경우 예상치 못한 결과가 발생할 수 있습니다.

수정 사항:
성장, 축소 및 기본 값을 지정하여 flex 속성을 미세 조정합니다. 예:

<div>



<p><strong>CSS:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.container {
  display: flex;
  justify-content: center;  /* Horizontally center */
  align-items: center;      /* Vertically center */
  height: 100vh;            /* Full viewport height */
}

로그인 후 복사

4. 항목 정렬과 내용 정당화에 대한 오해

문제:
align-items(교차축 제어)와 justify-content(주축 제어)를 혼동하면 레이아웃이 예상대로 작동하지 않을 수 있습니다.

수정 사항:
항상 기억하세요:

justify-content: 가로 정렬(행의 주축).
align-items: 세로 정렬(행의 교차 축).

5. 반응형 레이아웃을 위한 flex-wrap 잊어버리기

문제:
기본적으로 Flexbox는 항목을 래핑하지 않으므로 작은 화면에서는 항목이 너무 많이 줄어들 수 있습니다.

수정 사항:
flex-wrap 추가: Wrap; 공간이 충분하지 않을 때 항목이 다음 줄로 이동되도록 합니다.

.container {
  display: flex;
}

로그인 후 복사

참고:
이러한 일반적인 실수를 피하면 유연하고 시각적으로 매력적인 레이아웃을 만드는 데 도움이 됩니다. Flexbox의 강력한 기능을 최대한 활용하려면 다음 팁을 명심하세요!

Flexbox의 실제 애플리케이션

Flexbox는 유연성과 반응성이 필수적인 시나리오에서 빛을 발합니다. Flexbox가 가장 유용한 것으로 입증된 몇 가지 실용적인 애플리케이션은 다음과 같습니다.

1. 반응형 레이아웃 만들기
Flexbox는 다양한 화면 크기에 원활하게 적응하는 레이아웃 디자인 프로세스를 단순화합니다. 모바일 우선 디자인이든 데스크탑 중심 레이아웃이든 Flexbox를 사용하면 정렬과 간격을 쉽게 맞출 수 있습니다.

예: Flexbox와 미디어 쿼리를 결합하여 모바일의 2개 열에서 데스크톱의 4개 열로 조정되는 제품 그리드를 구축합니다.

.container {
  display: flex;
  flex-direction: column;
}

로그인 후 복사

2. 동적 콘텐츠 처리
Flexbox를 사용하면 콘텐츠 크기가 고정되지 않은 레이아웃을 쉽게 관리할 수 있습니다. 디자인을 훼손하지 않고 공간에 맞게 항목이 자동으로 조정됩니다.

예: 다양한 제목과 설명이 포함된 블로그 게시물 목록을 표시하여 콘텐츠 길이에 관계없이 균등하게 정렬되도록 합니다.

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

로그인 후 복사

3. 네비게이션 바 만들기
Flexbox는 수평으로 정렬되고 요소 간격이 균일한 탐색 모음을 만드는 데 이상적입니다. 항목을 래핑하여 내비게이션을 작은 화면에 맞게 조정할 수도 있습니다.

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

로그인 후 복사

4. 콘텐츠 중심
Flexbox를 사용하면 콘텐츠를 페이지 중앙에(수직 및 수평 모두) 손쉽게 배치할 수 있습니다. 이는 스플래시 화면, 모달 또는 히어로 섹션에 특히 유용합니다.

<div>



<p><strong>CSS:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.container {
  display: flex;
  justify-content: center;  /* Horizontally center */
  align-items: center;      /* Vertically center */
  height: 100vh;            /* Full viewport height */
}

로그인 후 복사

5. 동일 높이 카드 만들기
많은 디자인에서 카드와 같은 요소는 콘텐츠 길이에 관계없이 동일한 높이를 가져야 합니다. Flexbox는 추가 해킹 없이 일관된 높이와 정렬을 보장합니다.

<nav>



<p><strong>CSS:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.navbar {
  display: flex;
  justify-content: space-around;  /* Evenly spaces the links */
  background-color: #333;
}

.navbar a {
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}

로그인 후 복사

참고:
Flexbox는 반응형 및 동적 레이아웃을 생성하고, 다양한 콘텐츠 크기를 처리하고, 정렬을 단순화하는 데 적합한 솔루션입니다. 모바일용이든 데스크탑용이든 관계없이 Flexbox를 사용하면 레이아웃이 기능적이고 시각적으로 매력적으로 만들어집니다.