Flexbox – 공간을 정렬하고 분배하는 현대적인 방법

강의 14: Flexbox – 공간을 정렬하고 분배하는 현대적인 방법

안녕하세요! CSS에서 가장 멋지고 강력한 도구 중 하나를 사용할 준비가 되셨나요? 오늘은 Flexbox에 대해 알아보겠습니다. 깔끔하고 반응성이 뛰어난 방식으로 항목을 정렬하거나 공간을 분배하는 데 어려움을 겪고 있다면 Flexbox가 새로운 친구가 될 것입니다.

1. 플렉스박스란 무엇인가요?

Flexbox(Flexible Box Layout)는 요소의 크기를 알 수 없거나 동적인 경우에도 컨테이너 내부 요소의 정렬, 간격, 분포를 제어할 수 있는 1차원 레이아웃 시스템입니다.

Flexbox를 사용 가능한 공간에 따라 늘리거나 줄이거나 정렬할 수 있는 레이아웃을 만드는 도구 상자라고 생각하세요.

2. 마법은 디스플레이에서 시작됩니다: flex

Flexbox를 사용하려면 컨테이너에 display: flex만 설정하면 됩니다. 그렇게 하면 해당 컨테이너의 모든 직계 하위 항목이 플렉스 아이템이 되며 즉시 다르게 동작하기 시작합니다.

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

.flex-container {
    display: flex;
}

이제 .flex-container 내부의 모든 항목은 플렉스 항목이며 쉽게 조작할 수 있습니다.

3. Flex Direction – 어느 방향으로 가야 할까요?

기본적으로 Flexbox는 항목을 행(수평)으로 정렬하지만, 열(수직)로 정렬하려면 어떻게 해야 할까요? Flexbox는 flex-direction 속성

을 통해 완벽한 제어 기능을 제공합니다.

• row: 항목을 가로 행으로 정렬합니다(기본값).
• 열: 수직 열에 항목을 쌓습니다.
• row-reverse: 행과 동일하지만 항목 순서가 반대입니다.
• column-reverse: 열과 동일하지만 항목이 역순으로 쌓입니다.

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

이제 아이템이 수직으로 쌓이게 됩니다!

4. 콘텐츠 정당화 – 내용 확산

3개의 품목이 있고 이를 용기에 고르게 펴고 싶다고 가정해 보겠습니다. justify-content가 유용한 곳이 바로 여기입니다.

• flex-start: 항목이 컨테이너의 시작 부분에 정렬됩니다(기본값).
• center: 항목이 중앙에 배치됩니다.
• space-between: 첫 번째 항목이 시작되고 마지막 항목이 끝에 위치하여 항목의 간격이 균등합니다.
• space-around: 항목은 각 항목 주위에 동일한 패딩으로 간격이 지정됩니다.

.flex-container {
    display: flex;
    justify-content: space-between;
}

이제 항목은 컨테이너 내에서 균등한 간격으로 배치됩니다.

5. 아이템 정렬 – 수직 마법

justify-content가 가로 정렬을 제어하는 ​​동안 align-items는 세로 정렬(또는 교차 축을 따라)을 관리합니다. 옵션은 다음과 같습니다.

• stretch: 컨테이너를 채울 때까지 항목이 늘어납니다(기본값).
• flex-start: 항목이 위쪽으로 정렬됩니다.
• flex-end: 항목이 아래쪽으로 정렬됩니다.
• center: 항목이 수직으로 중앙에 배치됩니다.

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

이제 모든 항목이 컨테이너 내에서 세로 중앙에 배치됩니다.

6. Flex-Grow, Flex-Shrink 및 Flex-Basis – Flex 항목 미세 조정

가끔 특정 항목을 늘리거나 줄이거나 시작 크기를 고정하고 싶을 때가 있습니다. flex-grow, flex-shrink 및 flex-basis 속성을 ​​사용하면 해당 동작을 제어할 수 있습니다.

• flex-grow: 다른 항목에 비해 항목이 얼마나 늘어나야 하는지 제어합니다.
• flex-shrink: 다른 항목에 비해 항목이 얼마나 줄어들어야 하는지 제어합니다.
• flex-basis: 항목이 커지거나 줄어들기 전의 초기 크기를 설정합니다.

예:

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

이렇게 하면 항목이 100px에서 시작하지만 필요한 경우 축소하지 않고 추가 공간을 채울 수 있도록 늘릴 수 있습니다.

7. Flexbox 예제 실행

이 모든 것을 예시로 정리해보자!

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

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

이 예에서는:

• 항목이 일렬로 배열되어 있습니다.
• justify-content: space-around를 사용하여 균등한 간격으로 배치됩니다.
• 모든 항목은 align-items: center를 사용하여 컨테이너의 수직 중앙에 배치됩니다.
• flex-grow: 1 덕분에 각 항목은 사용 가능한 공간을 균등하게 채우도록 커집니다.

8. Flexbox가 인기 있는 이유

Flexbox는 CSS에서 어려움을 겪었던 레이아웃 디자인의 복잡성을 상당 부분 제거합니다. 더 이상 떠있지 않고, 클리어에 대해 걱정할 필요가 없으며, 반응형 디자인이 훨씬 쉬워졌습니다!

주요 시사점:

• 컨테이너를 플렉스 컨테이너로 바꾸려면 display: flex를 사용하세요.
• 흐름 방향(행 또는 열)을 설정하려면 flex-direction을 사용하세요.
• justify-content 및 align-items를 사용하여 간격과 정렬을 제어하세요.
• flex-grow, flex-shrink 및 flex-basis를 사용하여 플렉스 항목을 미세 조정하세요.

---

LinkedIn에서 나를 팔로우하세요.

리도이 하산

위 내용은 Flexbox – 공간을 정렬하고 분배하는 현대적인 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!