TIL - 53

chloe·2021년 7월 1일
0

Today I Learned

목록 보기
27/42

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가 똑같을때 퍼센트로 나타낸다
profile
Why not?

0개의 댓글