css 헷갈릴때 쓰는 사이트 : https://css-tricks.com/
css flex 게임하면서 배우기 : https://flexboxfroggy.com/#ko
css grid 게임하면서 배우기 : https://cssgridgarden.com/#ko
axis (축)
- css는 축이 존재한다
- main asix 과 cross axis 가 있다.
postion
relative -> 원래 있던 자리에서 변경이 일어남
abousolute -> 가까이 있는 태그에서 변경이 일어남
flex .container
-
flex-direction: column-> 세로로 배치 (기본값은row) -
flew-wrap: wrap-> 브라우저 크기가 작아졌을때 다음줄로 자동으로 넘어간다. (기본값 `nowrap) -
위의 두개 선택자를 아우르는 태그 : `
flex-flow:(direction),(wrap) -
justify-content: center/space-around/space-around-> 중심축에서 아이템 배치 > align-content비슷하게쓰암 -
align-items: 중심축과 반대인 축해서 아이템 배치 (baseline다른크기도 같은 줄이 배치가능)
flex .item
flex-grow:숫자-> 브라우저 크기가 줄어들었다가 늘어들때 크기비율설정flex-shirink:숫자->브라우저 크기가 줄어들때 숫자의 비율 만큼 다른 아이템보다 더 줄어듬flex-basis:숫자%-> grow와 shirink가 똑같을때 퍼센트로 나타낸다
Why not?