Flexbox – 공간을 정렬하고 분배하는 현대적인 방법-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-09-20 06:41:06

원래의

694명이 탐색했습니다.

Flexbox – The Modern Way to Align and Distribute Space

강의 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;
}

로그인 후 복사

이 예에서는: