CSS 페이지 레이아웃 2부 – flexbox 속성

CSS 페이지 레이아웃 속성은 사용자가 원하는데로 요소들을 배치하기 위해 사용하며, Display, Flexbox, Grid, Floats, Positioning, Table Layout, Multistage Layout 등이 있다. 속성마다 장단점이 있어서 각 속성을 정확히 파악하고 사용해야 한다. Display Flexbox 속성에 대한 정보를 기록하고자 CSS 페이지 레이아웃 2부를 작성했다.

주의사항
1. 2020년 7월 27일 기준 정보이다.
2. 모든 예시는 크롬 브라우저 기준이다.
3. 플렉스 컨테이너의 시작선과 끝선을 설명할 때 아랍어 방향은 고려하지 않는다.
4. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

목차

  1. Floats 및 Clear
  2. Positioning
  3. Display Outside 및 Inside
  4. Display Flow-root
  5. Display Table
  1. Display Flex
    6-1. Display Flex – flexbox 속성
    6-2. Display Flex – flexbox 정렬 속성 요약
    6-3. Display Flex – flexbox 정렬 속성
  1. Display Grid
    7-1. Display Grid – grid layout 속성
    7-2. Display Grid – grid layout 정렬 속성 요약
    7-3. Display Grid – grid layout 정렬 속성
  1. Multi-column Layout
  2. Media Query
  3. Legacy Layout Methods

Display Flex

○ 정의

요소의 Display Outside 속성이 block으로 변경되고, flexbox 모델에 따라 내용을 배치한다. flexbox 모델은 UI 디자인 및 1차원 레이아웃에 최적화되어 있다. 한 요소에 display: flex를 적용하면 해당 요소가 플렉스 컨테이너가 되고, 하위 요소가 플렉스 항목이 된다.

○ 코드 사용

display: flex;

– 플렉스 항목은 주축의 시작선의 가장자리에서부터 나열된다.
– flex-direction: row(기본값)이 적용되어 주축의 방향이 inline으로 설정된다.
– flex-wrap: nowrap(기본값)이 적용되어 플렉스 항목이 플렉스 컨테이너를 넘치더라도 한 줄로 나열된다.
– flex: 0, 1, auto(기본값)이 적용되어 플렉스 컨테이너의 크기가 플렉스 항목의 전체 크기보다 작으면 각 플렉스 항목의 크기가 플렉스 컨테이너의 크기를 넘어서지 않도록 수축하기 시작하고 최대 각 플렉스 항목의 콘텐츠 크기까지 수축한다. 플렉스 항목의 전체 크기가 각 플렉스 항목의 콘텐츠 크기까지 수축했음에도 플렉스 컨테이너의 크기보다 크다면 플렉스 컨테이너를 넘친다. 다만 플렉스 컨테이너의 크기가 플렉스 항목의 전체 크기보다 크더라도 각 플렉스 항목의 크기가 각 플렉스 항목의 콘텐츠 크기를 초과해서 성장하지는 않는다.
– 플렉스 항목이 교차축을 채우기 위해서 교차축의 방향으로 늘어난다.

○ 호환성

– 인터넷 익스플로러 11 버전 이상에서 지원한다.
– 다만 인터넷 익스플로러 11 버전에서 display:flex가 적용된 요소의 하위 요소에 position: relative와 left: 2em을 적용되고, 그 하위 요소의 하위 요소에 display:inline-block을 적용할 경우 그 하위 요소의 내용이 정상적인 위치에 표시되지 않는다.
– 인터넷 익스플로러 10 버전에서 사용하려면 -ms-flexbox로 작성해야 한다.
– 크롬, 오페라, 사파리, 안드로이드 웹 뷰, 안드로이드 크롬, iOS 사파리 구버전에서 사용하려면 접두사 -webkit-를 붙여야 한다.

display: -ms-flexbox;
display: -webkit-flex;
display: flex;

○ 속성 요약

1. 플렉스 항목 속성

(1) flex: 플렉스 컨테이너의 크기에 맞춰 플렉스 항목이 팽창하거나 수축하는 방법을 설정한다. flex-grow, flex-shrink, flex-basis 속성의 단축 구문이다.
(2) flex-grow: 플렉스 컨테이너 내 플렉스 항목이 팽창하는 방법을 설정한다.
(3) flex-shrink: 플렉스 컨테이너 내 플렉스 항목이 수축하는 방법을 설정한다.
(4) flex-basis: 플렉스 컨테이너 내 플렉스 항목이 팽창하거나 수축할 때 기준이 되는 크기를 설정한다.
(5) order: 플렉스 컨테이너 내 플렉스 항목을 배치하는 순서를 설정한다.

2. 플렉스 컨테이너 속성

(1) flex-flow: 플렉스 컨테이너에 플렉스 항목을 배치하는 방법을 설정한다. flex-direction, flex-wrap 속성의 단축 구문이다.
(2) flex-direction: 플렉스 컨테이너의 주축과 플렉스 항목이 나열되는 방향을 설정한다.
(3) flex-wrap: 플렉스 컨테이너의 줄 바꿈과 줄 바꿈 방향을 설정한다.

3. 플렉스 컨테이너 정렬 속성

(1) place-content: 플렉스 컨테이너의 교차축과 주축을 기준으로 플렉스 항목을 정렬하고 플렉스 항목이 나열된 줄 사이의 간격을 제어하는 방법을 설정한다. align-content, justify-content 속성의 단축 구문이다.
(2) align-content: 플렉스 컨테이너의 교차축을 기준으로 플렉스 항목의 줄을 정렬하고 플렉스 항목의 줄 사이의 간격을 제어하는 방법을 설정한다. flex-wrap: wrap에 의해 플렉스 항목이 여러 줄로 나열된 경우에만 정상적으로 작동한다.
(3) justify-content: 플렉스 컨테이너의 주축을 기준으로 플렉스 항목의 줄을 정렬하고 플렉스 항목의 줄 사이의 간격을 제어하는 방법을 설정한다.
(4) place-items: 플렉스 컨테이너의 교차축과 주축을 기준으로 모든 직계 자식 플렉스 항목의 align-self 속성과 justify-self 속성을 각각 그룹으로 묶어서 정렬하는 방법을 설정한다. align-items, justify-items 속성의 단축 구문이다.
(5) align-items: 플렉스 컨테이너의 교차축을 기준으로 모든 직계 자식 플렉스 항목의 align-self 속성을 그룹으로 묶어서 정렬하는 방법을 설정한다. 그리고 align-items 속성은 align-content 속성 보다 우선되지 않기 때문에 align-content 속성이 기본값 외의 다른 속성으로 변경되면 align-items 속성이 무시된다.

4. 플렉스 항목 정렬 속성

align-self: 플렉스 컨테이너의 교차축을 기준으로 플렉스 항목을 정렬하는 방법을 설정한다. 각 플렉스 항목을 개별적으로 정렬할 수 있다. align-self 속성은 align-items 속성 보다 우선되기 때문에 align-self 속성이 사용된 경우 align-items 속성은 무시된다.

○ 용어

1. 플렉스 컨테이너의 축

(1) 주축(Main Axis)
flexbox mainAxis

flex-direction으로 설정된 방향으로 정의된다. 주축의 방향은 flex-direction: row 또는 flex-direction: row-reverse가 적용된 경우 inline 방향이고, flex-direction: column 또는 flex-direction: column-reverse가 적용된 경우 block 방향이다.

(2) 교차축(Cross Axis)
flexbox crossAxis

주축의 방향의 직각 방향으로 정의된다. 교차축의 방향은 flex-direction: row 또는 flex-direction: row-reverse가 적용된 경우 block 방향이고, flex-direction: column 또는 flex-direction: column-reverse가 적용된 경우 inline 방향이다.

1. 플렉스 컨테이너의 시작선과 끝선

(1) 주축(Main Axis)의 시작선과 끝선

flexbox mainAxis startLine endLine

flex-direction의 값이 row여서 주축의 방향이 inline 방향일 때 글자 방향이 한글/영어 방향이라면 주축의 시작선은 맨 왼쪽이고, 끝선은 맨 오른쪽이다. flex-direction의 값이 row-reverse로 변경되어 플렉스 항목의 나열 방향이 반전되어도 주축의 시작선과 끝선의 위치는 고정되어 있다. 만약에 글자 방향이 아랍어 방향이고, flex-direction의 값이 row 또는 row-reverse라면 주축의 시작선이 맨 오른쪽이고, 끝선은 맨 왼쪽이 된다.
그리고 flex-direction의 값이 column이어서 주축의 방향이 block 방향일 때 글자 방향이 한글/영어 방향이라면 주축의 시작선은 맨 위쪽이고, 끝선은 맨 아래쪽이다. flex-direction의 값이 column-reverse로 변경되어 플렉스 항목의 나열 방향이 반전되어도 주축의 시작선과 끝선의 위치는 고정되어 있다.

(2) 교차축(Cross Axis)의 시작선과 끝선

flexbox crossAxis startLine endLine

교차축은 주축의 직각이므로 flex-direction의 값이 row 또는 row-reverse여서 교차축의 방향이 block 방향일 때 글자 방향이 한글/영어 방향이라면 교차축의 시작선은 맨 위쪽이고, 끝선은 맨 아래쪽이다. 그리고 flex-direction의 값이 column 또는 column-reverse여서 교차축의 방향이 inline 방향일 때 글자 방향이 한글/영어 방향이라면 교차축의 시작선은 맨 왼쪽이고, 끝선은 맨 오른쪽이다.

○ 플렉스 속성 학습

flexbox learning

– FLEXBOX FROGGY: https://flexboxfroggy.com/#ko
FLEXBOX 코드를 입력해서 개구리를 목적지로 이동시키는 게임으로 justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow, align-content의 사용법을 익힐 수 있다.

Flexbox 속성

○ flex

1. 정의

플렉스 컨테이너의 크기에 맞춰 플렉스 항목이 팽창하거나 수축하는 방법을 설정한다. flex-grow, flex-shrink, flex-basis 속성의 단축 구문이다.

2. 코드 사용

flex: <flex-grow> <flex-shrink> <flex-basis>

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– 인터넷 익스플로러 10 버전에서 flex를 사용하려면 접두사 -ms-를 붙여야 한다.
– 인터넷 익스플로러 10 버전과 11 버전에서 flex-basis 부분에 calc() 또는 단위가 없는 값을 인식하지 못한다.
– iOS 사파리 7 버전에서 flex를 사용하려면 접두사 -webkit-를 붙여야 한다.

-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;

4. 속성

(1) flex: initial
기본값. 플렉스 컨테이너의 크기가 플렉스 항목의 전체 크기보다 작으면 플렉스 항목이 플렉스 컨테이너의 여유 공간을 채우지 않고, 플렉스 컨테이너의 크기가 플렉스 항목의 전체 크기보다 크면 각 플렉스 항목의 크기가 콘텐츠의 최소 크기까지 수축한다. “flex: 0 1 auto” 설정과 같다.
(2) flex: auto
플렉스 컨테이너의 크기가 플렉스 항목의 전체 크기보다 작으면 각 플렉스 항목의 크기가 플렉스 컨테이너의 여유 공간을 채우기 위해 팽창하고, 플렉스 컨테이너의 크기가 플렉스 항목의 전체 크기보다 크면 각 플렉스 항목의 크기가 콘텐츠의 최소 크기까지 수축한다. “flex: 1 1 auto” 설정과 같다.
(3) flex: none
플렉스 컨테이너와 관련해서 수축하지도 않고 팽창하지도 않는다. “flex: 0 0 auto” 설정과 같다.
(4) <flex-grow>
플렉스 항목이 팽창하는 방법을 설정한다. flex 구문에서 생략할 경우 flex-grow: 1로 작동한다.
(5) <flex-shrink>
플렉스 항목이 수축하는 방법을 설정한다. flex 구문에서 생략할 경우 flex-shrink: 1로 작동한다.
(6) <flex-basis>
플렉스 항목이 팽창하거나 수축할 때 기준이 되는 크기를 설정한다. flex 구문에서 생략할 경우 flex-basis: 0으로 작동한다.

○ flex-grow

1. 정의

플렉스 컨테이너 내 플렉스 항목이 팽창하는 방법을 설정한다.

2. 코드 사용

flex-grow: 0;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– 인터넷 익스플로러 10 버전에서 flex-grow를 사용하려면 –ms-flex-positive로 작성해야 한다.
– iOS 사파리 7 버전에서 flex-grow를 사용하려면 접두사 -webkit-를 붙여야 한다.

–ms-flex-positive: 0;
-webkit-flex-grow: 0;
flex-grow: 0;

4. 코드 예시

(1) 각 플렉스 항목의 너비 값과 성장 계수가 같을 때
1
1
1
1
1

– 조건: flex-direction: row(기본값)이고, 플렉스 항목의 너비 값과 성장 계수가 각 30px과 1로 같을 때 플렉스 컨테이너의 너비 값이 150px에서 180px로 30px 만큼 팽창했다.
– 결과: 플렉스 컨테이너의 여유 공간을 각 플렉스 항목이 같이 차지한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 5이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 5이다. 각 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 팽창된 너비 값 30px을 성장 비율 1/5로 곱한 6px이 되고, 각 플렉스 항목의 너비 값은 30px에 6px를 더한 36px이 된다.

(2) 각 플렉스 항목의 너비 값이 같고 성장 계수가 1, 2로 구분될 때
1
1
1
2
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목의 너비 값이 30px로 같고, 플렉스 항목 5개 중 3개의 성장 계수가 1이고, 나머지 2개의 성장 계수가 2일 때 플렉스 컨테이너의 너비 값이 150px에서 180px로 30px 만큼 팽창했다.
– 결과: 플렉스 컨테이너의 여유 공간을 각 플렉스 항목이 각 플렉스 항목의 성장 계수 비율만큼 차지한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 7이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 7이고, 성장 계수가 2인 플렉스 항목의 성장 비율은 2 : 7이다. 성장 계수가 1인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 팽창된 너비 값 30px을 성장 비율 1/7로 곱한 4.2857…px이 되고, 플렉스 항목의 너비 값은 30px에 4.2857…px를 더한 34.2857…px이 된다. 그리고 성장 계수가 2인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 팽창된 너비 값 30px을 성장 비율 2/7로 곱한 8.5714…px이 되고, 플렉스 항목의 너비 값은 30px에 8.5714…px를 더한 38.5714…px이 된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

(3) 각 플렉스 항목의 너비 값이 다르고 성장 계수가 1, 2로 구분될 때
1
1
1
2
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목 5개 중 3개의 너비 값과 성장 계수가 각 20px과 1이고, 나머지 2개의 너비 값과 성장 계수가 각 30px과 2일 때 플렉스 컨테이너의 너비 값이 120px에서 150px로 30px 만큼 팽창했다.
– 결과: 플렉스 컨테이너의 여유 공간을 각 플렉스 항목이 각 플렉스 항목의 성장 계수 비율만큼 차지한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 7이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 7이고, 성장 계수가 2인 플렉스 항목의 성장 비율은 2 : 7이다. 성장 계수가 1인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 팽창된 너비 값 30px을 성장 비율 1/7로 곱한 4.2857…px이 되고, 플렉스 항목의 너비 값은 20px에 4.2857…px를 더한 24.2857…px이 된다. 그리고 성장 계수가 2인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 팽창된 너비 값 30px을 성장 비율 2/7로 곱한 8.5714…px이 되고, 플렉스 항목의 너비 값은 30px에 8.5714…px를 더한 38.5714…px이 된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

(4) 각 플렉스 항목의 너비 값이 다르고 성장 계수가 0, 1, 2로 구분될 때
0
0
0
1
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목 5개 중 3개의 너비 값과 성장 계수가 각 20px과 0이고, 나머지 1개의 너비 값과 성장 계수가 30px과 1이고, 나머지 1개의 너비 값과 성장 계수가 40px과 2일 때 플렉스 컨테이너의 너비 값이 130px에서 160px로 30px 만큼 팽창했다.
– 결과: 각 플렉스 항목이 플렉스 컨테이너의 여유 공간을 각 플렉스 항목의 성장 계수 비율만큼 차지한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 3이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 3이고, 성장 계수가 2인 플렉스 항목의 성장 비율은 2 : 3이다. 성장 계수가 1인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 팽창된 너비 값 30px을 성장 비율 1/3로 곱한 10px이 되고, 플렉스 항목의 너비 값은 30px에 10px를 더한 40px이 된다. 그리고 성장 계수가 2인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 팽창된 너비 값 30px을 성장 비율 2/3로 곱한 20px이 되고, 플렉스 항목의 너비 값은 40px에 20px를 더한 60px이 된다. 성장 계수가 0인 플렉스 항목의 너비 값은 콘텐츠의 너비 값으로 고정된다.

○ flex-shrink

1. 정의

플렉스 컨테이너 내 플렉스 항목이 수축하는 방법을 설정한다.

2. 코드 사용

flex-shrink: 1;

3. 호환성

– 인터넷 익스플로러 10 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– 인터넷 익스플로러 10 버전에서는 flex-shrink 속성의 기본값을 1 대신 0을 사용하기 때문에 flex-shrink에 명시적인 값을 지정해야 한다.
– iOS 사파리 8 버전에서 flex-shrink를 사용하려면 접두사 -webkit-를 붙여야 한다.

-webkit-flex-shrink: 1;
flex-shrink: 1;

4. 코드 예시

(1) 각 플렉스 항목의 너비 값과 축소 계수가 같을 때
1
1
1
1
1

– 조건: flex-direction: row(기본값)이고, 플렉스 항목의 너비 값과 축소 계수가 각 30px과 1로 같을 때 플렉스 컨테이너의 너비 값이 150px에서 120px로 30px 만큼 수축했다.
– 결과: 플렉스 컨테이너가 수축된 만큼 각 플렉스 항목이 각 플렉스 항목의 너비 대비 축소 계수 비율로 수축한다.
– 계산: 각 플렉스 항목의 너비 값에 각 플렉스 항목의 축소 계수를 곱하면 30px, 30px, 30px, 30px, 30px이 되고, 해당 값들의 합은 150px이 되므로 축소 계수가 1인 플렉스 항목의 축소비율은 30px : 150px이다. 각 플렉스 항목의 축소된 너비 값은 플렉스 컨테이너의 수축된 너비 값 30px을 축소비율 30/150로 곱한 6px이 되고, 각 플렉스 항목의 너비 값은 30px에 6px를 뺀 24px이 된다.

(2) 각 플렉스 항목의 너비 값이 같고 축소 계수가 1, 2로 구분될 때
1
1
1
2
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목의 너비 값이 30px로 같고, 플렉스 항목 5개 중 3개의 축소 계수가 1이고, 나머지 2개의 축소 계수가 2일 때 플렉스 컨테이너의 너비 값이 150px에서 120px로 30px 만큼 수축했다.
– 결과: 플렉스 컨테이너가 수축된 만큼 각 플렉스 항목이 각 플렉스 항목의 너비 대비 축소 계수 비율로 수축한다.
– 계산: 각 플렉스 항목의 너비 값에 각 플렉스 항목의 축소 계수를 곱하면 30px, 30px, 30px, 60px, 60px이 되고, 해당 값들의 합은 210px이 되므로 축소 계수가 1인 플렉스 항목의 축소비율은 30px : 210px이고, 축소 계수가 2인 플렉스 항목의 축소비율은 60px : 210px이다. 축소 계수가 1인 플렉스 항목의 수축된 너비 값은 플렉스 컨테이너의 수축된 너비 값 30px을 축소비율 30/210으로 곱한 4.2857…px이 되고, 플렉스 항목의 너비 값은 30px에 4.2857…px를 뺀 25.7142…px이 된다. 그리고 축소 계수가 2인 플렉스 항목의 수축된 너비 값은 플렉스 컨테이너의 수축된 너비 값 30px을 축소비율 60/210으로 곱한 8.5714…px이 되고, 플렉스 항목의 너비 값은 30px에 8.5714…px를 뺀 21.4285…px이 된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

(3) 각 플렉스 항목의 너비 값이 다르고 축소 계수가 1, 2로 구분될 때
1
1
1
2
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목 5개 중 3개의 너비 값과 축소 계수가 각 20px과 1이고, 나머지 2개의 너비 값과 축소 계수가 각 30px과 2일 때 플렉스 컨테이너의 너비 값이 120px에서 90px로 30px 만큼 수축했다.
– 결과: 플렉스 컨테이너가 수축된 만큼 각 플렉스 항목이 각 플렉스 항목의 너비 대비 축소 계수 비율로 수축한다.
– 계산: 각 플렉스 항목의 너비 값에 각 플렉스 항목의 축소 계수를 곱하면 20px, 20px, 20px, 60px, 60px이 되고, 해당 값들의 합은 180px이 되므로 축소 계수가 1인 플렉스 항목의 축소비율은 20px : 180px이고, 축소 계수가 2인 플렉스 항목의 축소비율은 60px : 180px이다. 축소 계수가 1인 플렉스 항목의 수축된 너비 값은 플렉스 컨테이너의 수축된 너비 값 30px을 축소비율 20/180으로 곱한 3.3333…px이 되고, 플렉스 항목의 너비 값은 20px에 3.3333…px를 뺀 16.6666…px이 된다. 그리고 축소 계수가 2인 플렉스 항목의 수축된 너비 값은 플렉스 컨테이너의 수축된 너비 값 30px을 축소비율 60/180으로 곱한 10px이 되고, 플렉스 항목의 너비 값은 30px에 10px를 뺀 20px이 된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

(4) 각 플렉스 항목의 너비 값이 다르고 축소 계수가 0, 1, 2로 구분될 때
0
0
0
1
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목 5개 중 3개의 너비 값과 축소 계수가 각 20px과 0이고, 나머지 1개의 너비 값과 축소 계수가 30px과 1이고, 나머지 1개의 너비 값과 축소 계수가 40px과 2일 때 플렉스 컨테이너의 너비 값이 130px에서 100px로 30px 만큼 수축했다.
– 결과: 플렉스 컨테이너가 수축된 만큼 각 플렉스 항목이 각 플렉스 항목의 너비 대비 축소 계수 비율로 수축한다.
– 계산: 각 플렉스 항목의 너비 값에 각 플렉스 항목의 축소 계수를 곱하면 0px, 0px, 0px, 30px, 80px이 되고, 해당 값들의 합은 110px이 되므로 축소 계수가 1인 플렉스 항목의 축소비율은 30px : 110px이고, 축소 계수가 2인 플렉스 항목의 축소비율은 80px : 110px이다. 축소 계수가 1인 플렉스 항목의 수축된 너비 값은 플렉스 컨테이너의 수축된 너비 값 30px을 축소비율 30/110으로 곱한 8.1818…px이 되고, 플렉스 항목의 너비 값은 30px에 8.1818…px를 뺀 21.8181…px이 된다. 그리고 축소 계수가 2인 플렉스 항목의 수축된 너비 값은 플렉스 컨테이너의 수축된 너비 값 30px을 축소비율 80/110으로 곱한 21.8181…px이 되고, 플렉스 항목의 너비 값은 40px에 21.8181…px를 뺀 18.1818…px이 된다. 수축 계수가 0인 플렉스 항목의 너비 값은 콘텐츠의 너비 값으로 고정된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

○ flex-basis

1. 정의

플렉스 컨테이너 내 플렉스 항목이 팽창하거나 수축할 때 기준이 되는 크기를 설정한다.

2. 코드 사용

flex-basis: auto;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– flex-basis의 값을 명시적으로 지정하면 인터넷 익스플로러 10 버전과 11 버전에서 정상적으로 작동하지 않기 때문에 flex-basis의 값을 auto로 설정하고 플렉스 정렬 방향에 따라서 각 플렉스 항목에 명시적인 너비 값 또는 높이 값을 지정해야 한다.
– iOS 사파리 7 버전에서 flex-basis를 사용하려면 접두사 -webkit-를 붙여야 한다.

-webkit-flex-basis: auto;
flex-basis: auto;

4. 코드 예시

(1) 플렉스 항목의 너비 값과 기본 크기가 같을 때
1
1
1
2
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목 5개 중 3개의 너비 값, 성장 계수, 기본 크기가 각 20px, 1, auto이고, 나머지 2개의 너비 값, 성장 계수, 기본 크기가 각 50px, 2, 50px일 때 플렉스 컨테이너의 너비 값이 160px에서 210px로 50px 만큼 팽창했다.
– 결과: 각 플렉스 항목이 플렉스 컨테이너의 여유 공간을 각 플렉스 항목의 성장 계수 비율만큼 차지한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 7이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 7이고, 성장 계수가 2인 플렉스 항목의 성장 비율은 2 : 7이다. 그리고 플렉스 컨테이너 내 여유 공간은 플렉스 컨테이너가 팽창한 50px과 플렉스 항목 중 기본 크기가 설정된 플렉스 항목의 너비 값의 합에서 기본 크기의 합을 뺀 0px를 더한 50px이다. 성장 계수가 1인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 여유 공간인 50px을 성장 비율 1/7로 곱한 7.1428…px이 되고, 플렉스 항목의 너비 값은 20px에 7.1428…px를 더한 27.1428…px이 된다. 그리고 성장 계수가 2인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 여유 공간인 50px을 성장 비율 2/7로 곱한 14.2857…px이 되고, 플렉스 항목의 너비 값은 기본 크기 50px에 14.2857…px를 더한 64.2857…px이 된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

(2) 일부 플렉스 항목의 기본 크기가 너비 값보다 25px 작을 때
1
1
1
2
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목 5개 중 3개의 너비 값, 성장 계수, 기본 크기가 각 20px, 1, auto이고, 나머지 2개의 너비 값, 성장 계수, 기본 크기가 각 50px, 2, 25px일 때 플렉스 컨테이너의 너비 값이 160px에서 210px로 50px 만큼 팽창했다.
– 결과: 각 플렉스 항목이 플렉스 컨테이너의 여유 공간을 각 플렉스 항목의 성장 계수 비율만큼 차지한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 7이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 7이고, 성장 계수가 2인 플렉스 항목의 성장 비율은 2 : 7이다. 그리고 플렉스 컨테이너 내 여유 공간은 플렉스 컨테이너가 팽창한 50px과 플렉스 항목 중 기본 크기가 설정된 플렉스 항목의 너비 값의 합에서 기본 크기의 합을 뺀 50px를 더한 100px이다. 성장 계수가 1인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 여유 공간인 100px을 성장 비율 1/7로 곱한 14.2857…px이 되고, 플렉스 항목의 너비 값은 20px에 14.2857…px를 더한 34.2857…px이 된다. 그리고 성장 계수가 2인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 여유 공간인 100px을 성장 비율 2/7로 곱한 28.5714…px이 되고, 플렉스 항목의 너비 값은 기본 크기 25px에 28.5714…px를 더한 53.5714…px이 된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

(3) 일부 플렉스 항목의 기본 크기가 0px일 때
1
1
1
2
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목 5개 중 3개의 너비 값, 성장 계수, 기본 크기가 각 20px, 1, auto이고, 나머지 2개의 너비 값, 성장 계수, 기본 크기가 각 50px, 2, 0px일 때 플렉스 컨테이너의 너비 값이 160px에서 210px로 50px 만큼 팽창했다.
– 결과: 각 플렉스 항목이 플렉스 컨테이너의 여유 공간을 각 플렉스 항목의 성장 계수 비율만큼 차지한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 7이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 7이고, 성장 계수가 2인 플렉스 항목의 성장 비율은 2 : 7이다. 그리고 플렉스 컨테이너 내 여유 공간은 플렉스 컨테이너가 팽창한 50px과 플렉스 항목 중 기본 크기가 설정된 플렉스 항목의 너비 값의 합에서 기본 크기의 합을 뺀 100px를 더한 150px이다. 성장 계수가 1인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 여유 공간인 150px을 성장 비율 1/7로 곱한 21.4285…px이 되고, 플렉스 항목의 너비 값은 20px에 21.4285…px를 더한 41.4285…px이 된다. 그리고 성장 계수가 2인 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 여유 공간인 150px을 성장 비율 2/7로 곱한 42.8571…px이 되고, 플렉스 항목의 너비 값은 기본 크기 0px에 42.8571…px를 더한 42.8571…px이 된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

(4) 일부 플렉스 항목의 기본 크기가 너비 값보다 75px 클 때
1
1
1
2
2

– 조건: flex-direction: row(기본값)이고, 플렉스 항목 5개 중 3개의 너비 값, 성장 계수, 기본 크기가 각 20px, 1, auto이고, 나머지 2개의 너비 값, 성장 계수, 기본 크기가 각 50px, 2, 125px일 때 플렉스 컨테이너의 너비 값이 160px에서 210px로 50px 만큼 팽창했다.
– 결과: 각 플렉스 항목의 기본 크기의 총합이 플렉스 컨테이너의 크기보다 크면 각 플렉스 항목이 각 플렉스 항목의 기본 크기 대비 축소 계수 비율로 수축한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 7이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 7이고, 성장 계수가 2인 플렉스 항목의 성장 비율은 2 : 7이다. 그리고 플렉스 컨테이너 내 여유 공간은 플렉스 컨테이너가 팽창한 50px과 플렉스 항목 중 기본 크기가 설정된 플렉스 항목의 너비 값의 합에서 기본 크기의 합을 뺀 -150px를 더한 -100px이다. 즉 플렉스 컨테이너의 너비 값이 100px 수축한 것과 같다.
플렉스 항목 5개 중 3개의 너비 값과 축소 계수는 각 20px와 1(기본값)이고, 나머지 2개의 너비 값과 축소 계수는 각 기본 크기인 125px과 1(기본값)일 때 플렉스 컨테이너의 너비 값이 기본 크기의 총 합인 310px에서 너비 값인 210px로 100px만큼 수축한 것과 같다. 각 플렉스 항목의 기본 크기에 각 플렉스 항목의 축소 계수를 곱하면 20px, 20px, 20px, 125px, 125px가 되고, 해당 값들의 합은 310px이 되므로 축소 계수가 1인 플렉스 항목의 축소비율은 20px : 310px이고, 축소 계수가 2인 플렉스 항목의 축소비율은 125px : 310px이다. 축소 계수가 1인 플렉스 항목의 수축된 너비 값은 플렉스 컨테이너의 수축된 너비 값 100px을 축소비율 20/310으로 곱한 6.4516…px이 되고, 플렉스 항목의 너비 값은 20px에 6.4516…px를 뺀 13.5483…px이 된다. 그리고 축소 계수가 2인 플렉스 항목의 수축된 너비 값은 플렉스 컨테이너의 수축된 너비 값 100px을 축소비율 125/310으로 곱한 40.3225…px이 되고, 플렉스 항목의 너비 값은 125px에 40.3225…px를 뺀 84.6774…px이 된다. 단 화면의 픽셀 단위는 1픽셀이 최소 단위이기 때문에 소수점이 발생하면 브라우저마다 소수점을 처리하는 방식(소수점 몇째 자리까지 지원하는지, 소수점을 몇째 자리에서 올림/반올림/내림하는지)이 달라서 결괏값이 다르게 출력될 수 있다.

○ order

1. 정의

플렉스 컨테이너 내 플렉스 항목을 배치하는 순서를 설정한다.

2. 코드 사용

order:0;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– 인터넷 익스플로러 10 버전에서 order를 사용하려면 접두사 -ms-를 붙여야 한다.
– iOS 사파리 7 버전에서 order를 사용하려면 접두사 -webkit-를 붙여야 한다.

-ms-order:0;
-webkit-order:0;
order:0;

4. 속성

음수, 0(기본값), 양수를 입력할 수 있다.

5. 코드 예시

(1) 네 번째 플렉스 항목에만 order: 0이 적용되었을 때
1
2
3
4
5
6
7

네 번째 플렉스 항목의 위치가 변하지 않는다.

(2) 네 번째 플렉스 항목에만 order: -1이 적용되었을 때
1
2
3
4
5
6
7

플렉스 항목 중 가장 첫 번째 위치로 이동한다.

(3) 네 번째 플렉스 항목에만 order: 1이 적용되었을 때
1
2
3
4
5
6
7

플렉스 항목 중 가장 마지막 위치로 이동한다.

(4) 모든 플렉스 항목의 순서대로 order 순번이 적용되고 네 번째 플렉스 항목의 order를 4에서 0으로 변경했을 때
1
2
3
4
5
6
7

order: 1이 적용된 플렉스 항목의 앞으로 이동한다.

(5) 모든 플렉스 항목의 순서대로 order 순번이 적용되고 네 번째 플렉스 항목의 order를 4에서 2로 변경했을 때
1
2
3
4
5
6
7

order: 2가 적용된 플렉스 항목이 2개가 되지만 네 번째 플렉스 항목의 html element 순서가 order: 2가 적용된 두 번째 플렉스 항목보다 뒤에 위치하기 때문에 두 번째 플렉스 항목의 뒤로 이동한다.

(6) 모든 플렉스 항목의 순서대로 order 순번이 적용되고 네 번째 플렉스 항목의 order를 4에서 3으로 변경했을 때
1
2
3
4
5
6
7

order: 3이 적용된 플렉스 항목이 2개가 되지만 네 번째 플렉스 항목의 html element 순서가 order: 3이 적용된 세 번째 플렉스 항목보다 뒤에 위치하기 때문에 화면상의 변화는 없다.

(7) 모든 플렉스 항목의 순서대로 order 순번이 적용되고 네 번째 플렉스 항목의 order를 4에서 6으로 변경했을 때
1
2
3
4
5
6
7

order: 6이 적용된 플렉스 항목이 2개가 되지만 네 번째 플렉스 항목의 html element 순서가 order: 6이 적용된 여섯 번째 플렉스 항목보다 앞에 위치하기 때문에 여섯 번째 플렉스 항목의 앞으로 이동한다.

○ flex-flow

1. 정의

플렉스 컨테이너에 플렉스 항목을 배치하는 방법을 설정한다. flex-direction, flex-wrap 속성의 단축 구문이다.

2. 코드 사용

flex-flow: <flex-direction> <flex-wrap>
flex-flow: row;
flex-flow: nowrap;
flex-flow: row nowrap;

flex-direction과 flex-wrap의 속성값이 완전히 별개이기 때문에 flex-direction 속성값만 작성하면 해당 속성만 적용되고, flex-wrap 속성값만 작성하면 해당 속성만 적용된다. 두 가지 속성을 모두 작성할 때는 flex-direction 속성값을 작성하고 그다음에 flex-wrap 속성값을 작성해야 한다.

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9버전 이상에서 지원한다.
– iOS 사파리 7 버전에서 flex-flow를 사용하려면 접두사 -webkit-를 붙여야 한다.

-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;

4. 속성

– initial: 기본값. “flex-flow: row nowrap” 설정과 같다.
– <flex-direction>: 플렉스 컨테이너의 주축과 플렉스 항목이 나열되는 방향을 설정한다.
– <flex-wrap>: 플렉스 항목의 줄 바꿈과 줄 바꿈 방향을 정의한다.

5. 코드 예시

(1) flex-flow: row wrap, 플렉스 항목의 height 값이 auto일 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 높이를 가득 채운 채 inline 방향의 주축을 따라 주축의 시작선에서 끝선으로 나열된다.

(2) flex-flow: row wrap-reverse, 플렉스 항목의 height 값이 auto일 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 높이를 가득 채운 채 inline 방향의 주축을 따라 주축의 시작선에서 끝선으로 나열되지만 줄바꿈 방향이 반전된다.

(3) flex-flow: column wrap, 플렉스 항목의 width 값이 auto일 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 너비를 가득 채운 채 block 방향의 주축을 따라 주축의 시작선에서 끝선으로 나열된다.

(4) flex-flow: column wrap-reverse, 플렉스 항목의 width 값이 auto일 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 너비를 가득 채운 채 block 방향의 주축을 따라 주축의 시작선에서 끝선으로 나열되지만 줄바꿈 방향이 반전된다.

○ flex-direction

1. 정의

플렉스 컨테이너의 주축과 플렉스 항목이 나열되는 방향을 설정한다.

2. 코드 사용

flex-direction: row;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– 인터넷 익스플로러 10 버전에서 flex-direction을 사용하려면 접두사 -ms-를 붙여야 한다.
– iOS 사파리 7 버전에서 flex-direction를 사용하려면 접두사 -webkit-를 붙여야 한다.

-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;

4. 속성

(1) flex-direction: row
기본값이다. 플렉스 컨테이너의 주축이 inline 방향으로 설정되고, 플렉스 항목이 주축의 시작선에서 끝선까지 행으로 나열된다.
(2) flex-direction: row-reverse
플렉스 컨테이너의 주축이 inline 방향으로 설정되고, 플렉스 항목이 주축의 끝선에서 시작선까지 행으로 나열된다.
(3) flex-direction: column
플렉스 컨테이너의 주축이 block 방향으로 설정되고, 플렉스 항목이 주축의 시작선에서 끝선까지 열로 나열된다.
(4) flex-direction: column-reverse
플렉스 컨테이너의 주축이 block 방향으로 설정되고, 플렉스 항목이 주축의 끝선에서 시작선까지 열로 나열된다.

5. 코드 예시

(1) flex-direction:row(기본값), flex-wrap:nowrap(기본값)일 때
1
2
3
4
5

플렉스 항목이 inline 방향의 주축을 따라 주축의 시작선에서 끝선까지 행으로 나열된다.

(2) flex-direction: row-reverse, flex-wrap:nowrap(기본값)일 때
1
2
3
4
5

플렉스 항목이 inline 방향의 주축을 따라 주축의 끝선에서 시작선까지 행으로 나열된다.

(3) flex-direction: column, flex-wrap:nowrap(기본값)일 때
1
2
3
4
5

플렉스 항목이 block 방향의 주축을 따라 주축의 시작선에서 끝선까지 열로 나열된다.

(4) flex-direction: column-reverse, flex-wrap:nowrap(기본값)일 때
1
2
3
4
5

플렉스 항목이 block 방향의 주축을 따라 주축의 끝선에서 시작선까지 열로 나열된다.

○ flex-wrap

1. 정의

플렉스 컨테이너의 줄 바꿈과 줄 바꿈 방향을 설정한다.

2. 코드 사용

flex-wrap: nowrap;

3. 호환성

– 인터넷 익스플로러 11 버전과 iOS 사파리 9 버전 이상에서 지원한다.
– 인터넷 익스플로러 11 버전에서 많은 버그가 발생하기 때문에 모질라 문서를 참고해야 한다.
– iOS 사파리 6.1 버전에서 flex-wrap를 사용하려면 접두사 -webkit-를 붙여야 한다.

-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;

4. 속성

(1) flex-wrap: nowrap
플렉스 항목이 한 줄로 배치되고 플렉스 컨테이너를 넘칠 수 있다.
(2) flex-wrap: wrap
플렉스 항목이 플렉스 컨테이너를 넘치지 않고 여러 줄로 배치된다.
(3) flex-wrap: wrap-reverse
플렉스 항{“type”:”block”,”srcClientIds”:[“5f01c3fd-c3b8-4876-9fe9-a9465561b7df”],”srcRootClientId”:””}목이 플렉스 컨테이너를 넘치지 않고 여러 줄로 배치되지만, 줄바꿈 방향이 반전된다.

5. 코드 예시

(1) flex-direction: row(기본값), flex-wrap: nowrap(기본값)일 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 한 줄로 배치되어 플렉스 항목의 크기의 합이 플렉스 컨테이너보다 작으면 플렉스 컨테이너 내에 각 플렉스 항목이 지정된 크기로 나열되고, 플렉스 항목의 크기의 합이 플렉스 컨테이너보다 크면 각 플렉스 항목의 크기가 콘텐츠의 최소 크기까지 수축한다. 그리고 각 플렉스 항목의 크기가 콘텐츠의 최소 크기까지 수축했음에도 공간이 부족하다면 플렉스 컨테이너를 넘친다.

(2) flex-direction: row(기본값), flex-wrap: wrap이고, 플렉스 항목의 height 값이 auto일 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 높이를 가득 채운 채 나열된다.

(3) flex-direction: row(기본값)이고, flex-wrap: wrap이고, 플렉스 항목의 height 값이 각 열이 차지할 수 있는 높이보다 작을 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 지정된 크기를 유지한 채 나열된다. 화면상에는 각 열의 아래쪽에 같은 빈 공간이 형성된 것처럼 보인다.

(4) flex-direction: row(기본값)이고, flex-wrap: wrap이고, 플렉스 항목의 height 값이 각 열이 차지할 수 있는 높이보다 클 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 지정된 크기를 유지한 채 나열되지만, 플렉스 컨테이너를 넘친다.

(5) flex-direction: row(기본값), flex-wrap: wrap-reverse이고, 플렉스 항목의 height 값이 auto일 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 높이를 가득 채운 채 나열되지만, 줄 바꿈 방향이 반전된다.

(6) flex-direction: row(기본값)이고, flex-wrap: wrap-reverse이고, 플렉스 항목의 height 값이 각 열이 차지할 수 있는 높이보다 작을 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 지정된 크기를 유지한 채 나열되지만, 줄 바꿈 방향이 반전된다. 화면상에는 각 열의 위쪽에 동일한 빈 공간이 형성된 것처럼 보인다.

(7) flex-direction: row(기본값)이고, flex-wrap: wrap-reverse이고, 플렉스 항목의 height 값이 각 열이 차지할 수 있는 높이보다 클 때
1
2
3
4
5
6
7
8
9
10

플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 지정된 크기를 유지한 채 나열되지만, 플렉스 컨테이너를 넘친다. 그리고 줄 바꿈 방향이 반전된다.

출처

관련 글

댓글쓰기