위치와 관련된 프로퍼티-Flexbox

flexbox

• 기존의 display, position을 통해 웹의 레이아웃 개발은 생각할 부분이 많고 한계가 어느정도 존재해 개발이 어려웠음

• 이를 쉽게 하기 위해 flexbox 방식이 추가되었고 자주 사용됨. 특별한 계산 없이 정렬을 쉽게 할 수 있다.

• flex box = flex container + flex item

• 정렬하고자하는 요소의 부모 요소에 display: flex;를 추가하면 flex를 사용할 수 있다.
  

• 가로 혹은 세로의 정해둔 방향을 기준으로 프로퍼티를 정렬하는 것이 핵심 개념.

부모요소(flex container)의 프로퍼티

1. flex-direction: flex 컨테이너 안의 item들의 방향을 정함/

2. flex-wrap: flex 아이템이 flex 컨테이너를 벗어 났을 때 줄을 바꾸는 속성

- flex flow: row wrap; = flex-direction: row; + flex-wrap: wrap;

3. justify-content: flex-direction으로 정해진 방향을 기준으로 수평으로 item을 정렬하는 방법을 정함.

   
   
   

   - space-around: 아이템 사이의 공간을 동일한 간격으로 아이템을 배치
   - space-between: 시작과 끝에 배치하고 남은 가격을 동일하게 아이템을 배치

4. align-items: flex-direction으로 정해진 방향을 기준으로 수직으로 item을 정렬하는 방법을 정함

   
   

5. align-content: flex-direction으로 정해진 방향을 기준으로 수직으로 여러 줄인 item을 정렬하는 방법을 정함.

   

   

자식요소(flex item)의 프로퍼티

1. flex-grow: flex 아이템의 확장과 관련된 속성, 단위 없는 숫자값을 사용. 기본:0

   • 0일 경우 flex contatiner의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기를 유지.

   • 1 이상의 숫자일 경우 flex contatiner의 크기가 커지면 그 크기를 맞추기 위해flex item의 크기가 커진다.

     

   

   • 더 큰 숫자가 더 큰 공간을 차지함
   • 만약 컨테이너 크기: 300px, 아이템 크기:60px 0, 1, 2가 있다면, 300-180=120px을 1:2로 나눠 가진다. 따라서 60px, 60+40=100px, 60+80=140px

2. flex-shrink: flex 아이템의 축소와 관련된 속성. 0과 정수를 이용.기본: 1

   • 0일 경우 컨테이너 크기가 아이템 크기보다 작아져도 원래 크기 유지
   • 속성값이 1 이상일 경우에 컨테이너 크기가 작아질 때 아이템의 크기가 그에 맞춰 작아짐.

   
   

   • 숫자가 클수록 더 많이 줄어듦.
   • ex) 컨테이너크기: 150px, 아이템크기: 60px, 0, 1, 2가 있다면, 60*3-150=30px 만큼 컨테이너보다 크기가 크므로 30px을 1:2로 나눠가진만큼 줄어든다. 따라서 60px, 60-10=50px, 60-20=40px

3. flex-basis: flex 아이템의 기본 크기를 결정함. 단위를 써줘야함. 기본: auto

   

4. flex: flex-grow, flex-shrink, flex-basis의 축약형

   • flex: 1 0 auto; = flex-grow:1; flex-shrink:0 flex-basis: auto;
   • flex: 0 1 auto; = flex-grow:0; flex-shrink:1, flex-basis: auto;
   • flex: 1 1 auto; = flex-grow:1; flex-shrink:1, flex-basis: auto;
   • flex: 1 auto; = flex-grow:1; flex-shrink:1, flex-basis: auto;

   flexbox를 활용한 간단한 레이아웃