[CSS]Flexbox 속성 정리

 

드림코딩의 아래 영상을 보고 공부하며 적은 글에, 몇 자 더하여 작성한 글입니다
CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
https://youtu.be/7neASrWEFEM

0. 기본 개념
 1) 정렬을 위해 사용
 2) 기본축과 반대축
  (1) 기본축과 반대축은 고정되어 있는 것이 아니다. 현재 정렬 상태에 따라 바뀔 수 있다. 

1. container에 적용되는 속성
 - display: flex; 
 - flex-direction: item을 어떤 방향(row/column)과 어떤 순서(-reverse여부)로 정렬할지 설정.
 - flex-wrap: 기본값은 nowrap; 한 줄이 다 차면 다음 줄로 넘어갈지 설정. reverse 설정 가능.
 - flex-flow: direction과 warp을 동시에 설정. (ex) flex-flow: row nowrap;
 - justify-content: 중심축을 기준으로 한 item배치 방식. 
   > space-around는 item을 중심으로 공간을 부여
   > sapce-evenly: 양끝-중간 모두 같은 간격 부여
   > space-between은 item을 width기준으로 왼쪽 오른쪽 끝에 배치 후 중간에 공간 부여
   > flex-start/end는 item을 container의 시작에 맞추어 정렬할지, 끝에 맞추어 정렬할지 설정
     (item의 순서는 바뀌지 않는다는 점에서 direction의 reverse와 차이)
 - align-items: 반대축을 기준으로 한 item배치 방식. 한 줄 속의 item을 어떤 방식으로 배치할 것인가.
   > baseline: 글자가 한 줄에 있도록 배치 // center: 반대축 중심으로 가운데 배치
 - align-content: 반대축을 기준으로 한 줄 정렬 방식. 여러 줄들을 어떤 방식으로 배치할 것인가.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2. item에 적용되는 속성
 - order: item의 순서를 지정해 줄 수 있다(사용빈도 낮음)
 - flex-grow: 설정 시 값들이 container의 남은 열을 채움. 설정되어 있지 않은 값(기본값: 0)은 고정값을 유지하고, 설정되어 있는 값들끼리 비율대로 늘어남
 - flex-shrink: grow는 반대. 줄어들 때 어떤 비율로 감소할 것인가.
 - flex-basis: 비율을 설정하여 열의 어느 정도를 차지할 것인지를 설정(기본값: auto, 0% 방식으로 설정)
 - align-self: containor에 설정된 값을 벗어나서, 개별 item의 위치 설정 가능(ex) align-self: center;

+) flexbox 연습
flexbox froggy: https://flexboxfroggy.com/