CSS flexbox 사용해보기(2)

HTML CSS JavaScript

CSS flexbox 사용해보기(2)

whs5758 2025. 7. 18. 11:49

1. Flexbox 속성으로 반응형 레이아웃(어떠게 배치하고 정렬) 준비하기

(1) flex-wrap: 요소를 줄바꿈하기

flex-wrap은 Flex Item이 한 줄에 모두 배치될지, 아니면 여러 줄로 나뉠지를 결정합니다. 반응형 디자인에서 화면이 작아질 때 요소가 자동으로 줄바꿈되도록 설정하는 데 유용합니다.

nowrap: 한 줄에 모두 배치 (기본값).
wrap: 공간이 부족하면 줄바꿈.
wrap-reverse: 줄바꿈하되, 줄 순서가 반대.

예제 1: flex-wrap으로 반응형 줄바꿈

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox flex-wrap</title>
    <style>
        .container {
            display: flex;
            flex-wrap: nowrap;
            /* flex-wrap: wrap; */
            /* 줄바꿈 활성화 */
            border: 2px solid #2E8B57;
            /* 시그린 색상 */
            padding: 10px;
        }

        .item {
            width: 100px;
            height: 100px;
            background: #FF6347;
            /* 토마토 색상 */
            margin: 5px;
            border: 2px solid #4682B4;
            /* 스틸 블루 색상 */
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

</html>

설명:

flex-wrap: wrap;을 설정해 컨테이너의 너비를 초과하면 Flex Item이 자동으로 아래 줄로 넘어갑니다.
화면을 좁히면(예: 브라우저 창 크기 조정), 박스들이 줄바꿈되어 반응형으로 배치됩니다.

(2) flex-flow: flex-direction과 flex-wrap 단축 속성

flex-flow는 flex-direction과 flex-wrap을 한 번에 설정하는 단축 속성입니다.

형식: flex-flow: [flex-direction] [flex-wrap];

예제 2: flex-flow 사용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox flex-flow</title>
  <style>
    .container {
      display: flex;
      flex-flow: row wrap; /* 가로 방향 + 줄바꿈 */
      border: 2px solid #2E8B57;
      padding: 10px;
    }
    .item {
      width: 100px;
      height: 100px;
      background: #32CD32; /* 라임 그린 색상 */
      margin: 5px;
      border: 2px solid #4682B4;
      border-radius: 10px;
      text-align: center;
      line-height: 100px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>

설명:

flex-flow: row wrap;은 flex-direction: row;와 flex-wrap: wrap;을 한 번에 설정한 것과 같습니다.
화면 크기에 따라 박스가 줄바꿈되며 반응형으로 동작합니다.

2. Flex Item의 크기 조정을 위한 속성

Flex Item의 크기를 유연하게 조정하는 속성들을 배워보겠습니다. 반응형 디자인에서는 화면 크기에 따라 요소의 크기가 적절히 변해야 하므로, 이 속성들이 매우 유용합니다.

(1) flex-grow: 남는 공간을 채우기

flex-grow는 Flex Container의 남는 공간을 Flex Item이 얼마나 차지할지를 결정합니다.

값:
- 기본값: 0 (남는 공간을 차지하지 않음).
- 숫자: 값이 클수록 더 많은 공간을 차지.

예제 3: flex-grow로 남는 공간 분배

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox flex-grow</title>
  <style>
    .container {
      display: flex;
      border: 2px solid #2E8B57;
      padding: 10px;
    }
    .item {
      width: 100px;
      height: 100px;
      background: #FFD700; /* 골드 색상 */
      margin: 5px;
      border: 2px solid #4682B4;
      border-radius: 10px;
      text-align: center;
      line-height: 100px;
      color: white;
    }
    .item1 { flex-grow: 1; }
    .item2 { flex-grow: 2; }
    .item3 { flex-grow: 1; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

설명:

flex-grow 값의 비율에 따라 남는 공간을 나눕니다.
item1과 item3은 flex-grow: 1;로 1만큼의 공간을, item2는 flex-grow: 2;로 2만큼의 공간을 차지합니다.
총 비율은 1 + 2 + 1 = 4이므로, item2가 남는 공간의 2/4(50%)를, 나머지 두 아이템이 각각 1/4(25%)씩 차지합니다.
화면 크기가 변해도 비율이 유지되므로 반응형으로 유용합니다.

(2) flex-shrink: 공간이 부족할 때 축소하기

flex-shrink는 Flex Container의 공간이 부족할 때 Flex Item이 얼마나 축소될지를 결정합니다.

비유: 책상 공간이 부족할 때 물건을 조금씩 줄여서 공간을 맞추는 것과 같아요.
값:
- 기본값: 1 (축소 가능).
- 숫자: 값이 클수록 더 많이 축소.

예제 4: flex-shrink로 축소 조정

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox flex-shrink</title>
    <style>
        .container {
            display: flex;
            width: 300px;
            /* 컨테이너 너비 제한 */
            border: 2px solid #2E8B57;
            padding: 10px;
        }

        .item {
            width: 150px;
            /* 기본 너비 */
            height: 100px;
            background: #FF6347;
            margin: 5px;
            border: 2px solid #4682B4;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
        }

        .item1 {
            flex-shrink: 1;
        }

        .item2 {
            flex-shrink: 2;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item1">1</div>
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item1">1</div>
        <div class="item item2">2</div>
    </div>
</body>

</html>

설명:

컨테이너 너비가 300px로 제한되어 있어, 두 아이템(각 150px)의 총 너비(300px)가 컨테이너를 초과하지 않도록 축소됩니다.
item1은 flex-shrink: 1;, item2는 flex-shrink: 2;로 설정되어, item2가 더 많이 축소됩니다.
반응형 디자인에서 화면이 작아질 때 요소 크기를 조정하는 데 유용합니다.

(3) flex-basis: 기본 크기 설정

flex-basis는 Flex Item의 기본 크기를 설정합니다. 주축 방향에 따라 width 또는 height를 대체합니다.

비유: 책상 위 물건의 기본 크기를 정하는 것과 같아요. "이 물건은 기본적으로 10cm로 시작하자!" 같은 느낌.
값:
- auto: 요소의 기본 크기(예: width나 height).
- 숫자(px, %, 등): 고정 크기.
- 0: 최소 크기로 시작.

예제 5: flex-basis 사용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox flex-basis</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #2E8B57;
            padding: 10px;
        }

        .item {
            height: 100px;
            background: #32CD32;
            margin: 5px;
            border: 2px solid #4682B4;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
        }

        .item1 {
            flex-basis: 200px;
            flex-grow: 1;
        }

        .item2 {
            flex-basis: 50px;
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
    </div>
</body>

</html>

설명:

flex-basis로 각 아이템의 기본 너비를 설정했습니다(item1은 200px, item2는 100px).
flex-grow: 1;을 추가해 남는 공간을 두 아이템이 동일한 비율로 나눠 가집니다.
화면 크기가 변해도 기본 크기와 성장 비율이 유지되므로 반응형으로 적절합니다.

(4) flex 단축 속성: flex-grow, flex-shrink, flex-basis 한 번에 설정

flex는 flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 단축 속성입니다.

형식: flex: [flex-grow] [flex-shrink] [flex-basis];
비유: 물건의 성장, 축소, 기본 크기 규칙을 한 번에 정하는 것과 같아요.
자주 사용하는 값:
- flex: 1;: flex-grow: 1; flex-shrink: 1; flex-basis: 0;과 같음.
- flex: auto;: flex-grow: 1; flex-shrink: 1; flex-basis: auto;와 같음.

예제 6: flex 단축 속성 사용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox flex shorthand</title>
  <style>
    .container {
      display: flex;
      border: 2px solid #2E8B57;
      padding: 10px;
    }
    .item {
      height: 100px;
      background: #FFD700;
      margin: 5px;
      border: 2px solid #4682B4;
      border-radius: 10px;
      text-align: center;
      line-height: 100px;
      color: white;
    }
    .item1 { flex: 1; }
    .item2 { flex: 2; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
  </div>
</body>
</html>

설명:

flex: 1;은 flex-grow: 1; flex-shrink: 1; flex-basis: 0;을 의미합니다.
item1은 남는 공간의 1/3을, item2는 2/3을 차지합니다.
반응형 디자인에서 아이템 크기를 비율로 조정하는 데 유용합니다.

3. 반응형 디자인을 위한 추가 속성과 팁

Flexbox를 반응형으로 만들기 위해 몇 가지 추가 속성과 미디어 쿼리를 활용하는 방법을 배워보겠습니다.

(1) align-content: 여러 줄의 Flex Item 정렬

flex-wrap: wrap;을 사용할 때, 여러 줄의 Flex Item을 교차축에서 정렬하려면 align-content를 사용합니다.

값:
- flex-start, flex-end, center, space-between, space-around, space-evenly.
비유: 책상 위 물건을 여러 줄로 나눴을 때, 줄 사이의 간격을 조정하는 것과 같아요.

예제 7: align-content 사용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox align-content</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            /* align-items 한줄에 대한 교차축 정령에 설정이고  */
            /* align-content는 wrap 속성이 발송했을 때 정렬에 대한 기준이다. */
            align-content: space-between;
            height: 800px;
            background-color: antiquewhite;
        }
       

        .item {
            width: 100px;
            height: 100px;
            background: #FF6347;
            margin: 5px;
            border: 2px solid #4682B4;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>

</html>

설명:

align-content: space-between;으로 줄 사이의 공간을 양 끝으로 분배했습니다.
컨테이너 높이를 400px로 설정해 여러 줄이 생기도록 했습니다.

'HTML CSS JavaScript' 카테고리의 다른 글

CSS 미디어 쿼리 (Media Query) (1)	2025.07.18
CSS 우선순위와 상속 (1)	2025.07.18
CSS flexbox 사용해보기 (2)	2025.07.18
CSS Float와 Clear 속성 (0)	2025.07.18
CSS Transition(부드러운 애니메이션 만들기) (1)	2025.07.18

현재글CSS flexbox 사용해보기(2)

개발자노트

개발자 노트 25.04.09~

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

개발자노트