레슨
시작
학습 시작
CodeGym /행동 /Frontend SELF KO /축의 방향

축의 방향

Frontend SELF KO
레벨 17 , 레슨 2
사용 가능

6.1 flex-direction 속성

Flexbox는 반응형 레이아웃을 만들기 위한 유연하고 강력한 도구를 제공해. 이 시스템의 중요한 부분은 레이아웃 축인데, 이것은 Flex 아이템들이 Flex 컨테이너 안에서 어떻게 배치될지 결정해 줘. 아래에서는 축의 방향과 Flex 아이템이 넘칠 때의 동작을 제어하는 flex-direction 및 flex-wrap 속성을 자세히 살펴볼거야.

flex-direction 속성은 Flex 아이템이 배치될 주축의 방향을 정해줘. 이 방향은 수평 또는 수직일 수 있고, 정방향 또는 역방향이 될 수 있어.

값들:

  • row: 주축이 왼쪽에서 오른쪽으로 수평으로 진행(기본값)
  • row-reverse: 주축이 오른쪽에서 왼쪽으로 수평으로 진행
  • column: 주축이 위에서 아래로 수직으로 진행
  • column-reverse: 주축이 아래에서 위로 수직으로 진행

사용 예시

1. 요소들이 수평으로 배치됨:

CSS 
    
      .container-row {
        display: flex;
        flex-direction: row;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">아이템 1</div>
        <div class="item">아이템 2</div>
        <div class="item">아이템 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">아이템 1</div>
        <div class="item">아이템 2</div>
        <div class="item">아이템 3</div>
      </div>
C++

2. 요소들이 수직으로 배치됨:

CSS 
    
      .container-column {
        display: flex;
        flex-direction: column;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-column-reverse {
        display: flex;
        flex-direction: column-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">아이템 1</div>
        <div class="item">아이템 2</div>
        <div class="item">아이템 3</div>
      </div>

      <div class="container-column-reverse">
        <div class="item">아이템 1</div>
        <div class="item">아이템 2</div>
        <div class="item">아이템 3</div>
      </div>

코드 설명:

  • .container-row: 요소들이 왼쪽에서 오른쪽으로 수평으로 배치됨
  • .container-row-reverse: 요소들이 오른쪽에서 왼쪽으로 수평으로 배치됨
  • .container-column: 요소들이 위에서 아래로 수직으로 배치됨
  • .container-column-reverse: 요소들이 아래에서 위로 수직으로 배치됨

6.2 flex-wrap 속성

flex-wrap 속성은 Flex 아이템이 하나의 행/열에 들어가지 않을 때 새 행/열로 넘어갈지 여부를 정해줘. 이 속성은 특히 기기나 화면에 따라 컨테이너 크기가 달라질 수 있는 반응형 레이아웃에 유용해.

값들

  • nowrap: 요소들은 한 줄/열에 배치되며, 기본값이야
  • wrap: 필요한 경우 요소들이 새 줄/열로 넘어가
  • wrap-reverse: 요소들이 새 줄/열로 넘어가는데, 역순이야

사용 예시

값: nowrap:

요소들은 한 줄/열로 배치되며, 기본값이야.

CSS 
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">아이템 1</div>
        <div class="item">아이템 2</div>
        <div class="item">아이템 3</div>
        <div class="item">아이템 4</div>
      </div>

값: wrap:

필요한 경우 요소들이 새 줄/열로 넘어가.

CSS 
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">아이템 1</div>
        <div class="item">아이템 2</div>
        <div class="item">아이템 3</div>
        <div class="item">아이템 4</div>
      </div>

값: wrap-reverse:

요소들이 새 줄/열로 넘어가는데, 역순이야.

CSS 
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">아이템 1</div>
        <div class="item">아이템 2</div>
        <div class="item">아이템 3</div>
        <div class="item">아이템 4</div>
      </div>

코드 설명:

  • .container-nowrap: Flex 아이템들이 한 줄로 배치되며, 컨테이너 경계를 넘어서도 한 줄로 유지돼
  • .container-wrap: Flex 아이템들이 한 줄에 안 들어가면 새 줄로 넘어가
  • .container-wrap-reverse: Flex 아이템들이 역순으로 새 줄로 넘어가

6.3 flex-direction과 flex-wrap의 사용

flex-direction과 flex-wrap 속성은 flex-flow 축약형 속성을 통해 결합할 수 있어. 이 속성을 사용하면 축의 방향과 요소의 이동을 동시에 설정할 수 있어.

구문:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

사용 예시:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <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>

코드 설명:

  • .container: Flex 컨테이너는 flex-direction: row;와 flex-wrap: wrap;을 결합하여 사용하며, 이는 요소들이 수평으로 배치되고, 필요할 때 새 줄로 넘어감을 의미해
코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION