CSS Flexbox 알아보기: 초보자를 위한 레이아웃 디자인 간단한 가이드-CSS 튜토리얼-php.cn

CSS Flexbox 알아보기: 초보자를 위한 레이아웃 디자인 간단한 가이드

Susan Sarandon

풀어 주다： 2024-10-14 06:14:29

원래의

482명이 탐색했습니다.

Learn CSS Flexbox: A Simple Guide for Beginners to Design Layouts

소개

요소를 정렬하거나 반응형 디자인을 만드는 데 어려움을 겪어 본 적이 있다면 Flexbox가 여러분의 삶을 단순화해 드립니다. 웹페이지 레이아웃을 더 쉽게 관리할 수 있도록 도입된 Flexbox는 복잡한 CSS 레이아웃 작업을 관리 가능하고 논리적인 단계로 간소화합니다.

기본 개념

Flex 컨테이너 및 항목:
Flexbox의 핵심은 컨테이너와 항목을 구분하는 것입니다.

.container {
    display: flex;
}

로그인 후 복사

이 간단한 선언은 .container를 플렉스 컨테이너로 변환합니다. .container 내부의 모든 항목은 Flexbox 규칙에 따라 Flex 항목이 됩니다.

주요 Flex 컨테이너 속성

Flex Direction
: Flexbox는 항목을 다양한 방향으로 정렬할 수 있습니다.

.container {
    display: flex;
    flex-direction: row; /* default, but can be column, row-reverse, or column-reverse */
}

로그인 후 복사

Justify Content
: 이 속성은 주축을 따라 정렬을 제어합니다.

.container {
    justify-content: center; /* or flex-start, flex-end, space-around, space-between */
}

로그인 후 복사

항목 정렬
: 주축에 수직으로 정렬합니다.

.container {
    align-items: center; /* or flex-start, flex-end, stretch (default), baseline */
}

로그인 후 복사

Flex Wrap
: 오버플로를 관리합니다.

.container {
    flex-wrap: wrap; /* or nowrap */
}

로그인 후 복사

기본 Flex 항목 속성

Flex Grow and Shrink
: 이 속성은 항목이 공간을 공유하는 방법을 제어합니다.

.item {
    flex-grow: 1; /* items can grow to fill available space */
    flex-shrink: 1; /* items can shrink if necessary */
}

로그인 후 복사

Flex Basis
: 초기 기본 크기를 설정합니다.

.item {
    flex-basis: 100px; /* initial main size of the item */
}

로그인 후 복사

실제 사례

간단한 탐색 표시줄

다음은 Flexbox가 어떻게 레이아웃을 단순화할 수 있는지 보여주는 실제 예입니다.

<nav class="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

로그인 후 복사

.navbar {
    display: flex;
    justify-content: space-around;
    background-color: #333;
}

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

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

로그인 후 복사

이렇게 하면 링크 간격이 균등한 중앙 탐색 모음이 생성됩니다.

카드 레이아웃

Flexbox는 반응형 카드 레이아웃을 만드는 데 탁월합니다.

<div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

로그인 후 복사

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card {
    flex: 0 0 calc(33.333% - 10px); /* each card takes 1/3 of the width minus some margin */
    margin: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
}

로그인 후 복사

모범 사례