CSS flex

flex item

.flex-item {
    flex: 0 1 auto; /* 팽창지수 + 수축지수 + 기준크기 */
    flex-grow: 0; /* 팽창지수 */
    flex-shrink: 1; /* 수축지수 */
    flex-basis: auto; /* 기준 크기 */
    align-self: auto; /* 독립적 교차축 정렬*/
    order: 0; /* 배치 정렬 */
}

free space (FS)

• 플렉스 아이템이 점유하는 영역(flex-basis, width, height, padding, border, margin)을 제외하고 남은 공간을 프리 스페이스라고 부른다.
• 0, 양수, 음수 프리 스페이스가 발생할 수 있다.
• 프리 스페이스는 플렉스 아이템의 팽창 지수(flex-grow)와 수축 지수(flex-shrink)를 이용하여 플렉스 아이템으로 분배할 수 있다.

플렉스 아이템의 팽창과 수축

flex-grow

• 양의 FS 발생시 플렉스 아이템의 팽창을 제어한다.
• 값: <number>
• 음수 사용 불가. 보통 ‘0’ 또는 ‘1’을 사용.
• 초기값: 0
• 단축 속성에서 생략하면 ‘1’이 됨.
• 비율을 다르게 할 수도 있음. (첫번째 1, 두번째 2이면 1:2로 진행됨)

flex-shrink

• 음의 FS 발생시 플렉스 아이템의 수축을 제어한다.
• 값: <number>
• 음수 사용 불가. 보통 ‘0’ 또는 ‘1’을 사용.
• 초기값: 1
• 단축 속성에서 생략하면 ‘1’이 됨.
• 비율을 다르게 할 수도 있음. (첫번째 1, 두번째 2이면 2:1로 진행됨)

flex-basis

• 플렉스 아이템의 진행 방향 기본 크기를 설정함으로써 FS 초기 값에 영향을 준다.
• 값: content | <width>
  • 팽창, 수축하기 이전의 기본 크기
• 초기값: auto
  • content 또는 width 값이 적용됨.
  • 단축 속성에서 생략하면 초기 값이 ‘0’이 된다.

flex

• 플렉스 아이탬의 ‘팽창, 수축, 기본 크기’를 제어하는 단축 속성
• 값: none |[<flex-grow> <flex-shrink>? || <flex-basis>]
• 초기값: 0 1 auto

flex-flow

• 플렉스 아이템의 진행방향과 줄바꿈 단축
• 값 <flex-direction> || <flex-wrap>
• 초기값: row nowrap

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님