📌Display

---

Flex Container 의 화면 출력(보여짐) 특성 제어

• Flex
  블록 요소와 같이 flex container 정의 (수직으로 컨테이너들이 쌓인다)

• Inline-flex
  인라인 요소와 같이 flex container 정의 (수평으로 컨테이너들이 쌓인다)

   - 기본적으로 수직정렬이다.
   - 수평정렬 하는 법
     부모에 display: flex; 를 넣어주면 됨

​

• Flex Containter - 부모

  • display
  • flex-flow
  • flex-direction
  • flex-wrap
  • jestify-content
  • align-content
  • align-items

• Flex Items - 자식요소

  • order
  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self

---

Flex-direction

주 축을 설정(수직 정렬을 할 것인가, 수평 정렬을 할 것인가?)

row(기본값) 행 축 (좌 → 우)
row-reverse 행 축 (우 → 좌)
column 열 축 (위 → 아래)
column-reverse 열 축 (아래 → 위)

• flex-direction: row; (오른쪽이 시작점/기본)
• flex-direction: row-reverse; (왼쪽이 시작점)
• cross-axis: 교차 측(위아래)
• main-axis: 주 축(옆)
• flex-direction: column; (맨위가 시작점/기본)
• flex-direction: column-reverse; (맨아래가 시작점)

​

Flex-wrap

Flex items 묶음(줄 바꿈) 여부

• nowrap(기본값) 묶음(줄 바꿈) 없음
• wrap 여러 줄로 묶음

​

Justify-content

주 축의 정렬 방법

• Flex-start(기본값) flex items를 시작점으로 정렬
• flex-end flex itmes를 끝 점으로 정렬
• center flex items를 가운데 정렬
• space-between 각 flex item의 사이를 균등하게 정렬
• space-around 각 flex item의 외부여백을 균등하게 정렬

​

Align-content

교차 축의 여러 줄 정렬방법(반드시 두줄 이상이어야함. flex-wrap:wrap; 상태여야함)

• stretch(기본값) 시작점으로 정렬
• flex-start 시작점으로 정렬
• flex-end 끝점으로 정렬
• center 가운데 정렬

​

Align-items

교차 축의 한 줄 정렬 방법

• stretch(기본값) flex items를 각 줄의 교차 축으로 늘림
• flex-start flex items를 각 줄의 시작점으로 정렬
• flex-end flex items를 각 줄의 끝점으로 정렬
• center flex items를 각 줄의 가운데 정렬
  
  

---

Order

Flex item 의 순서

• 0(기본값)
• 숫자 숫자가 작을 수록 먼저
  

Flex-grow

Flex item 의 증가 너비 비율(사이트를 제작할 때 각각 다른 사이즈의 이미지를 넣을 수 있음)

• 0(기본값)
• 숫자 증가 비율
  

Flex-shrink

Flex Item의 감소 너비 비율 (부모의 크기보다 자식이 커져도 이미지가 찌그러지지않고 유지할 수 있는 기능)
부모값에 wrap값을 주면 실행되지 않음 주의!

• 1(기본값)
  flex container 너비에 따라 감소 비율 적용 (자식에 flex-shrink: 0; 값을 주게 되면 기본 자식사이즈를 유지한다/부모요소를 뚫어버림)
• 숫자 감소 비율
  

Flex-basis

Flex Item의 공간 배분 적 기본 너비

• auto(기본값) 요소의 Content 너비
• 단위 px, em, rem ...
  

---

Quiz

Quiz1
Flex Container의 주 축을 지정하는 속성은?

Quiz2
Flex-wrap 속성의 기본값은?

Quiz3
교차 축(Cross-axis)의 한 줄 정렬을 위한 속성은?

Quiz4
Flex item의 증가 너비를 지정하는 속성은?

Quiz5
Flex grow의 기본값은?

Quiz6
Flex-shrink 속성의 기본값은?

⚡정답

1. flex-direction
2. nowrap
3. align-items
4. flex-grow
5. 0
6. 1