8-2 Flexbox

CSS Flexible Box Layout Module#

구형인터페이스

  • Jul 2009 Working Draft (display: box;)
  • Mar 2011 Working Draft (display: flexbox;)
  • Nov 2011 Working Draft (display: flexbox;)
  • Mar 2012 Working Draft (display: flexbox;)

모던인터페이스

  • Jun 2012 Working Draft (display: flex;)
  • Sep 2012 Candidate Recommendation (display: flex;)

flexbox#

axis#

flex-item

flex 요소 안의 직계 자식

image

flex-line

flex-item 을 배치하는 가상의 선

  • flexbox 는 기본적으로 그림을 그릴 때 한 줄만 그리는 정책을 가지고 있다.
main-axis

flex-line 의 기본값은 x 축이다.

cross-axis

main-axis 에 수직으로 교차하는 축

image

flex-direction#

  • main 축과 cross 축을 바꿀 수 있다.

default

  • 기본적으로 왼쪽 → 오른쪽으로, 위 → 아래로 배치

row-reverse

  • 오른쪽 → 왼쪽 배치

image

column

  • 기본은 위 → 아래

column-reverse

  • 아래 → 위

image

이 외에 공식문서에는 축이 결정되는 여러가지 방식이 나와 있다.

정렬#

justify-content#

  • 메인축을 기준으로 정렬

flex-start

  • direction 의 시작
  • default 에서 왼쪽

flex-end

  • direction 의 끝
  • default 에서 오른쪽

image

center

space-between

  • 사이에 여백을 둔다

space-around

  • 양쪽끝에도 여백을 둔다

image

align-items#

  • cross 축에서의 정렬

flex-start

flex-end

center

baseline

stretch

image

CSS box alignment module level 3#

위의 위치지정방법을 다른 레이아웃에서도 쓸 수 있게 하였다.

flex-wrap#

  • flex line 을 여러줄 쓰고 싶을 땐

nowrap(default) | wrap | wrap-reverse

wrap

  • 부모 컨텐츠 사이즈를 넘어가면 다음줄에서 flex-line 을 다시 그린다.
  • 현재 flex-line 에서 가장 하단이 큰 곳에 그린다.

align-content#

  • flex-wrap 에 적용되는 속성
  • wrapping 할 때 flex-line 을 어떻게 정렬할 것이냐

image

image

flex-item#

order: 1#

<div display: flex>
<div order:2>a</div>
<div order:1>b</div>
</div>

flexbox 의 장점은 order 를 이용하면 순서를 마음대로 바꿀 수 있다.

정렬할 때 js 로 order 값만 바꿔주면 된다.

dom render 이 아닌 post process 를 하기 때문에 빠르다 (gpu)

reflow 가 일어나지 않고 repaint 만 일어난다.

align-self#

align-items 와 관련되어 있다.

image

flex-grow | flex-shrink | flex-basis#

flex 영역 안에서의 크기를 결정한다.

  • grow

    • 0 : 100% 차지

  • 보통 1~ 에서 부터 값을 준다.

    • 1 의 의미 : flexbox 내 컨텐츠에게 값을 균등 배분했을 때 가중치
    • 다른 곳들에 모두 30 30 30 을 주나 1 1 1 을 주나 같다.
    • 소수점도 적용이 된다.

  • shrink

    • 기본적으로 값을 1을 준다.
      • 밀리지 않고 자신의 값을 유지하는 것을 의미

  • basis

    • auto | content
    • auto 와 content 는 같다.
    • content
      • flexbox 안에 있는 컨텐츠의 크기 = 나의 크기
    • flex-basis 속성 없이 width 나 height 를 주면 기본값이 된다.

  • max-width min-width 와 grow shrink 와의 관계

    • max-width 이 flexbox 를 이긴다.

  • 세가지 속성은 한꺼번에 줄 수 있다.

    • flex: 0 1 auto
    • 값 하나만 준다면
    • flex: initial | auto | none | 1~
    • none
      • flex 에 반응하지 않는다. 고정 크기를 유지한다.
    • initial
      • none 과 비슷하다. 기본적으로 flex 하지 않지만 확장만 되고 축소는 안된다.
    • auto
      • grow 만큼 커지거나 shrink 만큼 줄어들 수 있는 것들
    • 1~ 같은 비율을 여러개 준다면 content 가 있든 없든, 자식의 순서에 맞춰서 가중치를 주게 된다.

Reference#

Last updated on