TIL-css-flex

MIN.DI·2021년 9월 6일
0

TIL

목록 보기
12/15
  1. Container, item에 쓸 수 있는 속성이 각각 존재한다.

Container

  • display
    display:flex 선언해줌

  • flex-direction
    기본값은 row. 왼쪽에서 오른쪽으로 가는 열 방향.
    row-reverse : 오른쪽에서 왼쪽으로 가는 열 방향.
    cloumn : 위에서 아래로 가는 행 방향
    column-rever : 아래에서 위로 가는 행 방향
    (즉, row / column이 중심축 결정)

  • flex-wrap
    기본값은 nowrap.
    한줄에 가득 차면 다음줄로 넘길것인지, 빼곡하게 한줄로 채울것인지 결정

  • flex-flow
    flex direction, wrap을 동시에 기술할 수 있음

  • justify-content
    중심축을 기준으로 아이템을 어떻게 배치할건지.
    flex-start : 앞에서부터 배치
    flex-end: 뒤에서부터 배치
    center: 가운데 정렬
    space-around : 박스를 둘러싸는 space
    space-evenly
    space-between

  • align-items
    반대축을 기준으로 아이템을 어떻게 배치할건지
    기본값 baseline : 컨테이너 시작 위치에 정렬
    flex-start : 컨테이너의 꼭대기에 정렬
    flex-end
    center
    stretch

  • align-content
    center

Item

  • order
    item의 순서 지정

  • flex-grow
    컨테이너의 크기가 커짐에 따라 아이템의 크기가 얼마나, 어떻게 커질지?
    기본값은 0

  • flex-shrink
    컨테이너의 크기가 작아지메 따라 아이템의 크기가 얼마나, 어떻게 작아질지?

  • flex-basis
    아이템이 얼마나 공간을 차지할지, 더 세부적으로 지정
    (%로 지정)

  • align-self
    개별요소에 적용할 수 있는 속성.
    align-items가 사용하는 모든 값 사용 가능하며, 지정한 요소에만 적용됨.


  1. 중심축(main axis)와 반대축(cross axis)
    중심축을 수평(x축)/수직(y축) 중 하나로 정하면,
    나머지가 반대축이 된다.

height : 100%;height : 100vh; 의 차이
100%는, 해당 태그의 부모태그 기준 100%임.
따라서 뷰포트 전체에 100%를 적용시키려면
body, html의 height을 100%으로 적용시켜야 함.

vh는 view height.

profile
내가 보려고 쓰는 블로그

0개의 댓글