css flex, gird, etc..

박동건·2020년 10월 22일
0

TIL(2020)

목록 보기
49/49

css flex

우선, flex는 2개의 개념으로 나뉜다. 첫번 째는 container, 두번 째는 items

container는 items를 감싸는 부모 요소이며, 각 item을 정렬하기 위해선 container가 필수이다.

어렵다.. 눈 높이에 맞는 블로그를 참고하자. ( https://studiomeal.com/archives/197)

1. flex 컨테이너에 적용하는 속성들

displat: flex; 를 적용하는게 시작이다. flex 아이템들이 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다. (inline요소 처럼) height는 컨테이너의 높이만큼 늘어난다.

메인축(main axis)은 오뎅꼬치 교차축(cross axis)은 메인축의 수직

  • flex-direction : 아이템들이 배치되는 축의 방향을 결정하는 속성. 메인축을 가로로할거냐 세로로 할거냐?
  • flex-wrap : 한줄에 담을 여유 공간이 없을 때 줄바꿈을 어떻게 할꺼냐?

※ justify는 메인축 방향으로 정렬, align은 수직축 방향으로 정렬 (중요!)

  • justify-content : 메인축 방향으로 아이템들을 정렬하는 속성

  • align-items : 수직축 방향으로 아이템들을 정렬하는 속성

※ 위의 2개를 해주ㅜ면 아이템을 한 가운데에 정렬하는게 쉽다.

2. flex 아이템에 적용하는 속성들

  • flex-basis : 아이템의 기본 크기를 설정
    예) flex-basis: 100px; 이라고 했을 때, 100px이 안되는 애들은 100px로 되고 넘는 애들은 그대로 유지된다. width: 100px; 로 하면 넘는애들도 100px로 맞춰짐.

  • align-self : 수직축으로 특정 아이템 정렬

  • z-index : z축 정렬. 숫자가 클 수록 위로 올라간다. (스크린을 바닥으로 치고)

css grid

flex는 한 방향 레이아웃 시스템이고, grid는 두 방향 레이아웃 시스템이다.

display: grid; 로 시작한다.

  • grid-template-rows : 행의 배치
  • grid-template-columns : 열의 배치

※ fr은 fraction(비율). 숫자 비율대로 트랙의 크기를 나눈다.

  • justify-content : 아이템그룹 가로 정렬.
  • align-content : 아이템그룹 세로 정렬.

css 가상요소

https://developer.mozilla.org/ko/docs/Web/CSS/::before


대박 좋은 블로그 찾음!! (반드시 기억해야 하는 CSS 선택자 30개 )

profile
박레고의 개발 블로그

0개의 댓글