Chapter 2. Flexbox

학습 목표

• display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.
• flex-direction을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
• justify-content와 align-items를 이용하여 수평-수직 정렬을 결정할 수 있다.
• flex-grow를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
• flex-basis를 이용하여 요소의 기본 크기를 결정할 수 있다.
• VSCode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.

Flexbox로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.

Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정할 수 있다.

flexbox 속성을 사용할 때 유의해야할 점은 속성을 지정해주는 위치이다. 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있으며, 적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는대로 정렬되지 않는다.

2-1. Flexbox 따라하기(1)

display: flex 분석하기

• 부모 박스 요소에 적용하여, 자식 박스의 방향과 크기를 결정하는 방법

예시)

• HTML로 3개의 <div> 요소를 자식으로 가진 <main> 요소 작성

   <main>
  		<div>box1</div>
  		<div>box2</div>
  		<div>box3</div>
   </main>

• 각 요소가 눈에 잘 보이도록 <main> 요소에 빨간색 점선, <div> 요소에 초록색 실선, margin과 padding에 각각 10px 설정

      main {
    border: 1px dotted red;
      }
  
      div {
      border: 1px solid green;
      }
  
      * {
    margin: 10px;
    padding: 10px;
      }

<div> 요소들은 별다른 설정을 하지 않으면 위쪽에서부터 세로로 정렬되고, 가로로 넓게 공간을 차지한다.

! <main> 요소에 display: flex 속성 적용

main {
  **display: flex;**
  border: 1px dotted red;
}

...

<div> 요소들이 왼쪽부터 가로로 정렬되고, 내용만큼의 공간을 차지한다.

---

부모 요소에 적용해야하는 Flexbox 속성들

1. flex-direction : 정렬 축 정하기

• 자식 요소들을 정렬할 정렬 축을 정함
• 아무 설정도 하지 않으면 기본적으로 가로 정렬

main {
	display: flex;
	**flex-direction : row;**
}
	/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */

• row(기본값)

  • 아이템들이 가로 방향으로 배치됨
    

• column

  • 아이템들이 세로 방향으로 배치됨
    

• row-reverse

  • 아이템들이 역순으로 가로 배치됨
    

• column-reverse

  • 아이템들이 역순으로 세로 배치됨
    
    
    

2. flex-wrap : 줄바꿈 설정하기

• 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄바꿈을 할 것인지 설정
• 설정하지 않으면 줄바꿈 하지 않음

main {
	display: flex;
	**flex-wrap : nowrap;**
}
	/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */

• nowrap(기본값)

  • 줄바꿈을 하지 않음
    

• wrap

  • 줄바꿈을 함
  • float나 inline-block으로 배치한 요소들과
    비슷하게 동작
    

• wrap-reverse

  • 줄바꿈을 함
  • 아이템을 역순으로 배치
    
    
    

3. justyfy-content : 축 수평 방향 정렬

• 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 설정

• 주요 속성값 : flex-start , flex-end, center, space-between, space-around

• flex-start

  • 아이템들을 시작점으로 정렬
  • row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위

• flex-end

  • 아이템들을 끝점으로 정렬
  • row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래

• center

  • 아이템들을 가운데로 정렬

• space-between

  • 아이템들 사이에 균일한 간격을 두고 정렬

• space-around

  • 아이템들의 둘레에 균일한 간격을 두고 정렬

• space-evenly

  • 아이템들의 사이와 양 끝에 균일한 간격을 두고 정렬
  • IE와 Edge에서 지원되지 않음

• flex-direction : row 인 경우 ↔
  

• flex-direction : column 인 경우 ↕️
  

4. align-items : 축 수직 방향 정렬

• 자식 요소들의 축의 수직 방향으로 어떻게 정렬할 것인지 설정

• 가로로 정렬되어 있다면 세로 방향으로, 세로로 정렬되어 있다면 가로 방향으로 어떻게 정렬할 것인지 정하는 속성

• 주요 속성값 : stretch , flex-start , flex-end , center , baseline

• stretch

  • 아이템들이 수직축 방향으로 끝까지 늘어남

• flex-start

  • 아이템들을 시작점으로 정렬
  • flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽

• flex-end

  • 아이템들을 끝으로 정렬
  • flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽

• center

  • 아이템들을 가운데로 정렬

• baseline

  • 아이템들을 텍스트 베이스라인 기분으로 정렬

• flex-direction : row 인 경우 ↕️
  

• flex-direction : column 인 경우 ↔

2-2. Flexbox 따라하기(2)

Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정할 수 있다. 부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련이 있다.

자식 요소에 적용해야 하는 Flexbox 속성

flex 속성의 값

flex 속성은 세 가지 값을 지정해줄 수 있다.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

• grow(팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인가
• shrink(수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인가
• basis(기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미

속성을 따로 설정해주지 않으면 기본값이 적용되고, 왼쪽에서부터 오른쪽으로 콘텐츠 크기만큼 배치된다.

flex: 0 1 auto;

* 이 순서와 기본값은 반드시 기억!!!!! flex: grow shrink basis, flex: 0 1 auto

값을 각각 따로 지정해줄 수도 있다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

1. grow

• grow(팽창 지수)는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것

즉, box가 3개일 경우

box1 : box2 : box3 = 1 : 0 : 0 이므로 box1이 모든 공간을 차지하고,

box1 : box2 : box3 = 1 : 1 : 0 이므로 box1과 box2가 1:1로 공간을 나눠 가지고,

box1 : box2 : box3 = 1 : 1 : 1 이므로 세 박스가 1:1:1로 공간을 나눠 가진다.

팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합의 비율로 빈 공간을 가져간다.

2. shirink

• grow와 반대로, 설정한 비율만큼 박스 크기가 작아짐
• 비율이 클수록 더 많이 줄어듦
• flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 비추천
• 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장
  • flex-shrink 속성은 width나 이후 설명할 flex-basis속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문
• flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.

3. basis

• 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
• flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지
• display 속성에 flex가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis로 설정된 크기가 항상 유지되는 것은 아님
• flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있음

+) 참고
- width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선
- 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음
- (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있음