[ CSS ] Flexbox 2

치즈·2025년 9월 15일
CSSSeSAC청년취업사관학교
0
post-thumbnail

청년취업사관학교 SeSAC의 CSS 강의를 통해 학습한 Flexbox 에 대한 두 번째 개념 정리 문서입니다.


flex-direction 예제 코드

[ index.html ]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="flex-container">
      <!-- 플렉스 컨테이너 내부 div -->
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

[ style.css ]

.flex-container {
  display: flex; /* flex container로 설정 */
  background-color: bisque;

  width: 100vw;
  height: 500px;
}

/* flex-item의 배치(정렬) 방향 */
.d-row {
  /* default 값: row */
  flex-direction: row;
}

.d-row-reverse {
  /* 행, 역방향: 오른쪽 -> 왼쪽 */
  flex-direction: row-reverse;
}

.d-col {
  /* 열, 정방향 */
  flex-direction: column;
}

.d-col-reverse {
  /* 열, 역방향 */
  flex-direction: column-reverse;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

.align-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.box {
  background-color: lightblue;
  width: 100px;
  height: 200px;
  margin: 20px;
}

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

.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-2 {
  flex-grow: 2;
}

.flex-shrink-0 {
  /* 축소 비율: 0 -> 축소를 안한다 */
  flex-shrink: 0;
}

.flex-shrink-2 {
  flex-shrink: 2;
}

  • 위의 style.css 파일을 기반으로 index.html 파일을 수정하며 예시를 알아 보자.

  • index.html 파일에서 중점적으로 수정 되는 코드 라인은 다음과 같다.

    • <div class="flex-container">

flex-direction 예제 결과 화면

1-1. <div class="flex-container d-row">

  • default 상태

  • flexbox 의 기본 정렬 방식은 row(행) 정렬이다.

1-2. <div class="flex-container d-row-reverse">


1-3. <div class="flex-container d-col">

  • 아래 .d-col.reverse 와의 결과 구분을 위해 숫자를 넣었습니다.

1-4. <div class="flex-container d-col-reverse">



교차 축 정렬(배치) 방식

<div class="flex-container align-center">

  • 교차축 방향 중앙 정렬.

  • 같은 방법으로 align-start 와 align-end 도 사용할 수 있다.



flex-wrap 예제 코드

flex-wrap 의 예제를 위해 box(flex item)를 많이 생성해 보자!

[ index.html ]

<div class="flex-container">
  <!-- 플렉스 컨테이너 내부 div -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

flex-wrap 예제 결과 화면

1-1. <div class="flex-container flex-wrap">

  • 너비(높이)보다 내부 아이템의 너비(높이) 합이 크면 내부 아이템의 크기 변경 없이 여러 줄 배치.

1-2. <div class="flex-container flex-nowrap">

  • 너비(높이)보다 내부 아이템의 너비(높이) 합이 크면 내부 아이템의 너비(높이)를 줄여서 한 줄에 배치.

nowrap과 wrap의 이름 또는 기능을 서로 변경했으면 더 좋았을 거 같다...



flex-basis 예제 코드

flex-basis 예제를 위해 div class="box" 의 속성 값을 아래와 같이 수정해 보자!

<div class="flex-container">
  <!-- 플렉스 컨테이너 내부 div -->
  <div class="box basis-200"></div>
  <div class="box"></div>
</div>

flex-basis 예제 결과 화면

  • 개별 아이템에 적용되는 속성

  • 기본 너비(높이), 아이템의 기본 크기



align-self 예제 코드

align-self 예제를 위해 div class="box"에 아래의 세 속성 값을 추가해 보자!

  • align-self-start
  • align-self-center
  • align-self-end 
<div class="flex-container">
  <!-- 플렉스 컨테이너 내부 div -->
  <div class="box align-self-start"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-center"></div>
  <div class="box align-self-end"></div>
</div>

align-self 예제 결과 화면

  • 개별 아이템의 교차축 배치(정렬) 방식이다.

  • align-self 의 우선 순위는 align-item 보다 높다.


flex-grow 예제 코드

flex-grow 예제를 위해 div class="box" 의 속성 값을 아래와 같이 수정해 보자!

<div class="flex-container">
  <!-- 플렉스 컨테이너 내부 div -->
  <div class="box flex-grow-1"></div>
  <div class="box flex-grow-2"></div>
</div>

flex-grow 예제 결과 화면

  • 개별 아이템이 컨테이너의 빈 공간을 차지하는 비율.

  • 만약 남은 공간이 300 이라면 flex-grow-1은 100을, flex-grow-2는 200을 차지한다.



flex-shrink 예제 코드

flex-shrink 예제를 위해 div class="box" 의 속성 값을 아래와 같이 수정해 보자!

<div class="flex-container">
  <!-- 플렉스 컨테이너 내부 div -->
  <div class="box flex-shrink-0"></div>
  <div class="box flex-shrink-2"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

flex-shrink 예제 결과 화면

  • flex-shrink 의 기본 값은 1이다.

  • 사실, flex-shrink 속성의 메인은 0이라는 값이다.

    • flex-shrink: 0; : flex container가 줄어들어도 해당 flex item은 줄어들지 않는다는 의미이다.

    • 핵심 포인트 : flex container 내부에 flex item이 아무리 많아져도 shrink 값을 0으로 설정한 flex item 은 줄어들지 않는다.




Flexbox 연습하기

Flexbox 코드를 통해 개구리를 연잎 위에 올려 놓으면 된다.

Flexbox Froggy

profile
치즈
백엔드 개발자를 희망하는 코린이입니다 :)
이전 포스트

[ CSS ] Flexbox 1

다음 포스트

[ JavaScript ] 모듈(+NPM)

0개의 댓글