[6] flexbox 속성 공부 with 네이버D2

unu·2020년 12월 26일
0

요약
일반적으로 웹페이지 레이아웃은 display, float, position 등과 같은 속성을 사용해 구현방법이 어려웠지만, 플렉스를 이용하면 레이아웃의 구현이 쉬워진다.

flexbox란

flexbox는 유연한 배치가 장점인 새로운 레이아웃 방식이다.

flexbox구성

flexbox는 flex container와 flex item으로 구성됨. 좌->우 방향의 main axix와 위->아래 방향의 cross axix 두가지 정렬 방식이 있다. flex-direction 속성에서 row(→)/column(↓) 두 가지 속성값에 따라 방향을 결정할 수 있다.

flex container(부모), flex item(자녀) 각각에 적용되는 속성들

  • flex container(부모): 전체적인 정렬이나 흐름 관련 속성
    속성 속성값
    flex-direction 플렉스 방향 설정
  • row(행)
  • column(열)
  • flex-wrap 감싸기 방식
  • nowrap(기본 설정으로, 플렉스 요소가 다음 줄로 넘어가지 않습니다.
    대신에 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치)
  • wrap(여유 공간이 없으면 다음 줄로 넘어가서 배치)
  • wrap-reverse(여유공간이 없으면 다음 줄로 넘어가서 배치됩니다. 단, 아래쪽이 아닌 위쪽으로 넘어감)
  • justify-content 수평방향 정렬 방식
  • flex-start(기본값, 주축 시작 기준)
  • center(주출의 중앙기준),
  • flex-end(주축 끝 기준)
  • space-around(주축 기준 일정간격)
  • space-between
  • align-items 주축을 기준으로 수직 정렬
  • stretch(기본값)
  • flex-start(교차축 시작 기준)
  • center(교차축 중앙 기준)
  • baseline(글꼴 기준선 기준)
  • flex-end(교차축 끝 기준)
  • align-content 교차축을 따라 아이템 주변, 사이의 공간 분배
  • start
  • center
  • space-between
  • space-around

  • flex item(자녀): 자식 요소의 크기나 순서에 관련된 속성
    속성 속성값
    flex grow, shrink, basis 속성의 축약
  • (기본값)
  • 0 1 auto;
  • 1; = 1 1 0;
  • flex-grow 확장 관련, 컨테이너 크기 따라 아이템 커짐
  • 0(컨테이너 크기가 커져도 아이템 크기 변화 없음)
  • 양의 정수(아이템의 원래크기 상관없이 컨테이너를 채우도록 아이템 크기 커짐)
  • flex-shrink 축소 관련, 컨테이너 크기 따라 아이템 축소
  • 0(컨테이너 크기가 아이템 크기보다 작아져도 원래 크기 유지)
  • 1(컨테이너 작아지면 아이템도 맞추어 축소)
  • flex-basis 아이템의 기본 크기를 결정하는 속성
  • auto(기본값)
  • width 속성에서 사용하는 모든 단위(설정시 크기 고정)
  • 0(absolut item>컨테이너 기준으로 크기 결정)
  • order 컨테이너 안에 있는 플렉스 아이템들의 순서를 설정함. order: 숫자로 순서
    align-self align-items를 무시하고 임의로 정렬할 때
  • stretch
  • center
  • start
  • end
  • 속성이나 속성값은 내가 적은 것 외에도 더 있는 것 같았는데 전부 파악하기 어려웠다.
    공부하다보면 필요한 걸 찾겠지 뭐

    profile
    나 미대 나온 개발자야~

    0개의 댓글