FLEX

flex 연습게임

https://flexboxfroggy.com/#ko

중심축: Justify
반대축: Align

부모속성에만 사용 가능

-display:flex; 가 있다는 전제하에

justify-contnet (가로축 이동)

• flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
• flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
• center : 요소들을 컨테이너의 가운데로 정렬
• space-between : 요소들 사이에 동일한 간격을 줌
• space-around : 요소들 주위에 동일한 간격을 줌
  
  

align-itmes (세로축 이동)

• flex-start : 요소들을 컨테이너의 꼭대기로 정렬
• flex-end : 요소들을 컨테이너의 바닥으로 정렬
• center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
• baseline : 요소들을 컨테이너의 시작 위치에 정렬
• stretch : 요소들을 컨테이너에 맞도록 늘림
  
  

flex-direction (row,column 방향설정!)

• row : 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
• column : 요소들을 위에서 아래로 정렬
• column-reverse : 요소들을 아래에서 위로 정렬
  
  

order 태그의 순서를 바꿔줄 수 있다!

#### align-self 개개인 상하축! 이동! align-self:flex-end;
#### flex-wrap !!! flex는 무조건 한 줄에 다같이 나오려고 한다. 자식들의 위드가 넘치더라도

• nowrap : 모든 요소들을 한 줄에 정렬
• wrap : 요소들을 여러 줄에 걸쳐 정렬 (떨군다!)
• wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬
  
  

align-content

• flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end : 여러 줄들을 컨테이너의 바닥에 정렬
• center : 여러 줄들을 세로선 상의 가운데에 정렬
• space-between : 여러 줄들 사이에 동일한 간격을 줌
• space-around : 여러 줄들 주위에 동일한 간격을 줌
  
  

자식속성에만 사용 가능

shrink 줄어들다

• flex-grow : 자라나다~ / 증가될 때의 비율
• flex-shrink : 줄어들다 / 줄어들 때의 비율
• flex-basis : 중심축 기준 위드 높이

flex-flow : flex-direction + flex-wrap
flex-flow : row wrap, column wrap