자식에게 부여하는 flex(flex-grow, flex-shrink, flex-basis) 속성

<.parent>
  <.child .one />
  <.child .two />
  <.child .three />
</.parent>

• flexbox를 사용하기 위해서는 부모 요소(.parent)에 display: flex 속성을 준다.
• flex 속성은 자식 요소(.child)에 부여한다.
• flex: 0 1 auto;는 작성자가 따로 추가하지 않은 디폴트 값이다
• flex 속성의 값은 다음과 같다
  • flex: [flex-grow] [flex-shrink] [flex-basis]

• flex-grow
  • 디폴트 값 0: 여백을 자기 컨텐츠만큼만 갖는다. (컨텐츠 = 각 child에 들어있는 단어/문장)
    • 부모의 크기와 상관 없이
  • flex-grow: 1: 세 child 들의 크기가 parent의 width를 모두 차지한다.
    • 이때, 1:1:1의 비율로 공간을 차지하는데, 컨텐츠 크기가 아닌 여백을 기준으로 나눠갖는다.

• 전체적으로 여백을 나눠갖는다 생각하면 되는듯

• 참고 및 출처
  https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/
  https://www.youtube.com/watch?v=pgFyqS4oCIc <- 이해 완전 쉬움