개요
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가지 값이 가능하다.
rowrow-reversecolumncolumn-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 중 하나이다.
구성요소 프로퍼티
레퍼런스
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS Animation 속성이란? (0) | 2022.11.13 |
|---|---|
| CSS 포지션 (position) 속성이란? (0) | 2022.11.12 |
| PostCSS 의 Autoprefixer 란 무엇인가? (0) | 2022.06.12 |
| PostCSS 란 무엇인가? (0) | 2022.06.12 |
| SCSS 의 믹스인 (@mixin) 키워드에 대해 알아보자 (0) | 2022.06.12 |