Flexbox 완벽 가이드

display와 flex-direction 예제

컨테이너의 display를 flex로 설정하면 Flexbox 컨텍스트가 생성됩니다. flex-direction은 아이템 배치 방향을 지정합니다.

flex-direction: row

1

2

3

        
          <div class="flex-container" style="flex-direction: row;">

            <div class="flex-item">1</div>

            <div class="flex-item">2</div>

            <div class="flex-item">3</div>

          </div>

flex-direction: column

1

2

3

        
          <div class="flex-container" style="flex-direction: column; height: 150px;">

            <div class="flex-item">1</div>

            <div class="flex-item">2</div>

            <div class="flex-item">3</div>

          </div>

justify-content와 align-content의 차이

justify-content: 주축(main axis)에서 아이템을 정렬합니다. 아래 예제에서는 아이템이 주축을 따라 간격을 두고 배치됩니다.

justify-content 예제 (space-around)

1

2

3

        
          <div class="flex-container" style="justify-content: space-around;">

            <div class="flex-item">1</div>

            <div class="flex-item">2</div>

            <div class="flex-item">3</div>

          </div>

align-content: 여러 행(row)을 교차축(cross axis)에서 정렬합니다. 아래 예제에서는 행 간의 간격을 조정합니다.

align-content 예제 (space-between)

A

B

C

D

        
          <div class="flex-container" style="flex-wrap: wrap; align-content: space-between; height: 200px;">

            <div class="flex-item" style="height: 50px;">A</div>

            <div class="flex-item" style="height: 50px;">B</div>

            <div class="flex-item" style="height: 50px;">C</div>

            <div class="flex-item" style="height: 50px;">D</div>

          </div>

flex-wrap 예제

flex-wrap 속성은 아이템이 컨테이너의 크기를 초과할 때 줄 바꿈 여부를 결정합니다.

flex-wrap: wrap

1

2

3

4

        
          <div class="flex-container" style="flex-wrap: wrap;">

            <div class="flex-item" style="flex-basis: 150px;">1</div>

            <div class="flex-item" style="flex-basis: 150px;">2</div>

            <div class="flex-item" style="flex-basis: 150px;">3</div>

            <div class="flex-item" style="flex-basis: 150px;">4</div>

          </div>

Flex 아이템 속성 예제

Flex 아이템 속성을 활용하여 개별 아이템의 크기와 동작 방식을 제어할 수 있습니다.

flex-grow, flex-shrink, flex-basis

Grow 2

Grow 1

Grow 0

        
          <div class="flex-container">

            <div class="flex-item" style="flex: 2 1 100px;">Grow 2</div>

            <div class="flex-item" style="flex: 1 1 100px;">Grow 1</div>

            <div class="flex-item" style="flex: 0 1 100px;">Grow 0</div>

          </div>

정렬 조합 예제

align-items와 justify-content를 함께 사용하여 교차축과 주축에서 아이템을 정렬할 수 있습니다.

align-items와 justify-content 조합

1

2

3

        
          <div class="flex-container" style="justify-content: center; align-items: flex-end; height: 150px;">

            <div class="flex-item" style="height: 50px;">1</div>

            <div class="flex-item" style="height: 80px;">2</div>

            <div class="flex-item" style="height: 100px;">3</div>

          </div>