본문 바로가기
Study/CSS

CSS 기초 강의 4편: Flexbox를 사용한 유연한 레이아웃 구성하기

by wawManager 2024. 11. 19.
728x90

1. Flexbox 개념과 기본 설정

Flexbox는 **플렉스 컨테이너(Flex Container)**와 **플렉스 아이템(Flex Item)**으로 구성됩니다.

  1. 플렉스 컨테이너: display: flex를 적용한 부모 요소로, 플렉스 아이템을 배치하고 정렬하는 기준이 됩니다.
  2. 플렉스 아이템: 플렉스 컨테이너의 자식 요소로, 배치와 정렬이 플렉스 컨테이너의 설정에 의해 제어됩니다.
.container {
    display: flex; /* 플렉스 컨테이너 설정 */
}

2. 주요 Flexbox 속성

1) flex-direction

플렉스 아이템의 배치 방향을 설정합니다.

  • row (기본값): 아이템을 가로 방향으로 배치합니다.
  • row-reverse: 아이템을 가로 방향으로 배치하지만, 반대 순서로 표시합니다.
  • column: 아이템을 세로 방향으로 배치합니다.
  • column-reverse: 아이템을 세로 방향으로 배치하되, 반대 순서로 표시합니다.
.container {
    display: flex;
    flex-direction: row; /* 기본 가로 배치 */
}

2) justify-content

플렉스 아이템의 주축(가로 또는 세로)의 정렬 방식을 설정합니다.

  • flex-start: 시작점 정렬 (기본값)
  • center: 중앙 정렬
  • flex-end: 끝점 정렬
  • space-between: 아이템 사이에 균일한 간격을 둠
  • space-around: 아이템 양쪽에 동일한 간격을 둠
.container {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
}

3) align-items

플렉스 아이템의 교차축(가로 방향일 때는 세로축)의 정렬 방식을 설정합니다.

  • stretch: 아이템을 교차축 방향으로 늘림 (기본값)
  • flex-start: 교차축의 시작점에 정렬
  • center: 교차축의 가운데에 정렬
  • flex-end: 교차축의 끝점에 정렬
.container {
    display: flex;
    align-items: center; /* 세로축 중앙 정렬 */
}

3. 플렉스 아이템 속성

1) flex-grow

플렉스 아이템의 증가율을 설정합니다. 값이 클수록 남은 공간을 더 많이 차지하게 됩니다.

.item {
    flex-grow: 1; /* 모든 아이템이 동일하게 남은 공간을 차지 */
}

2) flex-shrink

플렉스 아이템의 축소율을 설정합니다. 값이 클수록 화면이 줄어들 때 더 많이 줄어듭니다.

.item {
    flex-shrink: 1; /* 모든 아이템이 동일하게 줄어듦 */
}

3) flex-basis

플렉스 아이템의 기본 크기를 설정합니다. width 속성과 유사하지만, flex-grow와 flex-shrink 속성에 따라 유동적으로 변경됩니다.

.item {
    flex-basis: 200px; /* 아이템의 기본 크기 */
}

4) flex

flex-grow, flex-shrink, flex-basis를 한 줄로 설정할 수 있습니다.

.item {
    flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}

4. Flexbox로 간단한 레이아웃 만들기

Flexbox를 활용해 간단한 레이아웃을 구성해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox 레이아웃 예제</title>
    <style>
        /* 플렉스 컨테이너 */
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: 300px;
            background-color: #f2f2f2;
        }

        /* 플렉스 아이템 */
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            font-size: 20px;
            text-align: center;
        }

        /* 각 아이템의 크기 설정 */
        .item1 {
            flex: 1;
        }

        .item2 {
            flex: 2;
        }

        .item3 {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
    </div>
</body>
</html>

코드 설명

  • flex-direction: row: 아이템을 가로로 배치합니다.
  • justify-content: space-around: 아이템 사이에 균일한 간격을 둡니다.
  • align-items: center: 세로축의 가운데 정렬을 지정합니다.
  • 각 아이템에 flex 속성을 다르게 설정하여 Item 2가 더 많은 공간을 차지하도록 합니다.

5. Flexbox 정렬 속성 요약

속성설명

flex-direction 아이템의 배치 방향 설정 (row, row-reverse, column, column-reverse)
justify-content 주축 방향으로 아이템 정렬 (flex-start, center, flex-end, space-between 등)
align-items 교차축 방향으로 아이템 정렬 (stretch, flex-start, center, flex-end)
flex-grow 남은 공간을 차지하는 비율 설정
flex-shrink 화면이 줄어들 때 크기를 줄이는 비율 설정
flex-basis 아이템의 기본 크기 설정
flex flex-grow, flex-shrink, flex-basis의 단축 속성

요약

이번 강의에서는 CSS Flexbox 레이아웃의 기본 개념과 다양한 속성을 활용하여 유연한 레이아웃을 구성하는 방법을 배웠습니다. Flexbox는 정렬과 배치가 자유롭고 유연해, 반응형 웹 디자인에 매우 유용합니다. 다음 강의에서는 CSS Grid 레이아웃을 학습하여 복잡한 2차원 레이아웃을 쉽게 구성하는 방법을 알아보겠습니다.

728x90

'Study > CSS' 카테고리의 다른 글

CSS 기초 강의 6편: 반응형 웹 디자인과 미디어 쿼리  (0) 2024.11.21
CSS 기초 강의 5편: Grid 레이아웃을 활용한 2차원 레이아웃 구성하기  (0) 2024.11.20
CSS 기초 강의 3편: CSS 레이아웃 기초와 박스 모델  (0) 2024.11.18
CSS 기초 강의 2편: CSS 선택자와 우선순위  (1) 2024.11.17
CSS 기초 강의 1편: CSS의 기본 개념과 문법  (0) 2024.11.16

관련글

티스토리툴바