프론트엔드/CSS

CSS - Flex 정리

Jake Seo 2022. 7. 4. 02:40

개요

2017년에 W3C Candidate Recommendation 에서 레이아웃 쉽게 잡을 수 있도록 FlexBox Layout 을 만들었다. FlexBox Layout 는 사이즈에 상관없이 유연하다고해서 이름에 flex 라는 단어가 들어갔다.

사이즈에 상관없이 유연하다는 장점이 있어 스크린의 크키가 각각 다른 기계에 대해서도 균일한 스타일 코드가 나올 수 있다는 장점이 있다.

Flexbox Layout 과 비교되는 것으로 Grid Layout 이 있는데, 이는 좀 더 큰 사이즈의 레이아웃을 만드는 것을 목적으로 탄생했다.

  • Flexbox Layout: 애플리케이션의 컴포넌트 레이아웃에 쓰기 적합 (one-dimensional layout model)
  • Grid Layout: 애플리케이션 전체의 레이아웃에 쓰기 적합 (two-dimensional layout model)

동명의 같은 지식들

Flex 두개의 축

Flex 는 기본적으로 두개의 축을 기반으로 한다. main-axis 와 cross-axis 가 있다. flex-direction 은 main-axis 를 정의한다. flex 로 하는 일들은 이 두개의 축을 가지고 노는 것이다.

Main-axis

flex-direction 프로퍼티에 의해 결정된다. 4가지 값이 가능하다.

  • row
  • row-reverse
  • column
  • column-reverse

flex-direction 이 row 혹은 row-reverse 일 때의 main-axis 는 아래와 같다.

 

 

flex-direction 이 column 혹은 column-reverse 일 때의 main-axis 는 아래와 같다.

 

Cross-axis

이는 main-axis 와 직각이 되는 (perpendicular) 선이다.

flex-direction 이 row 혹은 row-reverse 일 때

 

 

flex-direction 이 column 혹은 column-reverse 일 때

 

시작 라인과 끝 라인 (Start and End lines)

예전에는 모든 것들을 왼쪽에서 오른쪽으로 읽는다는 사실이 당연했지만, 오른쪽에서 왼쪽으로 무언가를 읽거나 작성하길 원하는 사용자의 니즈도 있었다. Start 와 End 를 설정하는 것으로 손쉽게 좌우 방향을 바꿀 수 있다.

왼쪽 시작 오른쪽 끝 (영어의 경우)

오른쪽 시작 왼쪽 끝 (아랍어의 경우)

플렉스 컨테이너 (Flex Container)

flex box 를 사용해 펼쳐진 document 영역을 Flex Container 라고 한다. display: flex 혹은 display: flex-inline 으로 Flex Container 를 생성할 수 있다. Flex Container 안에 있는 것은 Flex Item 이 된다. CSS 의 다른 프로퍼티들처럼, 초기 값이 존재한다.

  • items 의 flex-direction 의 기본 값은 row 이다.
    • 가로로 배치된다.
  • items 의 배치는 main-axis 의 start edge 로부터 시작하여 end edge 로 끝난다. (왼쪽 -> 오른쪽)
  • items 는 main dimension 에서는 늘어나지는 않지만, 쪼그라들 수는 있다. (can shrink)
  • items 는 cross-axis 의 사이즈를 채우기 위해 늘어날 수 있다.
    • flex-direction 의 기본값은 row 이므로 세로로 늘어날 수 있다.
  • flex-basis 프로퍼티는 auto 로 세팅된다.
  • flex-wrap 프로퍼티는 nowrap 으로 세팅된다.

프로퍼티 기본 값 테스트

<div style="display: flex" class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three
      <br>has
      <br>extra
      <br>text
  </div>
  <div>Additional Box</div>
  <div>Additional Box</div>
  <div>Additional Box</div>
  <div>Additional Box</div>
  <div>Additional Box</div>
  <div>Additional Box</div>
</div>

flex-wrap: 넘치는 Flex items 를 다뤄보자

flex-wrap 은 Flex Container 내부에 Flex items 가 넘칠 때 이를 제어하는 프로퍼티이다. flex-wrap 은 기본값으로 nowrap 이 들어있는데, nowrap 으로 설정할 시에 위의 프로퍼티 기본 값 테스트처럼 overflow 가 일어난다. 이를 방지하기 위해서는 wrap 으로 프로퍼티 값을 바꾸어주어야 한다.

<div style="display: flex; flex-wrap: wrap;" class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three
      <br>has
      <br>extra
      <br>text
  </div>
  <div>Additional Box</div>
  <div>Additional Box</div>
  <div>Additional Box</div>
  <div>Additional Box</div>
  <div>Additional Box</div>
  <div>Additional Box</div>
</div>

flex-flow: flex-wrap 과 flex-direction 을 한번에 다뤄보자

flex-flow 는 축약된 방식(shorthand way) 이다. 두가지 속성을 갖는데 첫번째가 flex-direction 이고 두번째가 flex-wrap 이다.

flex-flow: row wrap; 이 flex-direction: row; flex-wrap: wrap; 과 같은 역할을 한다.

CSS 의 flex 프로퍼티

이는 display: flex 가 적용된 내부 아이템들을 어떻게 표기할지 비율로 나타낼 때 주로 사용된다. 이 역시 CSS shorthand properties 중 하나이다.

구성요소 프로퍼티

레퍼런스

반응형
저작자표시 비영리