CSS 페이지 레이아웃 속성은 사용자가 원하는 대로 요소들을 배치하기 위해 사용하며, Display, Flexbox, Grid, Floats, Positioning, Table Layout, Multistage Layout 등이 있다. 속성마다 장단점이 있어서 각 속성을 정확히 파악하고 사용해야 한다. Display Flexbox 속성에 대한 정보를 기록하고자 CSS 페이지 레이아웃 2부를 작성했다.
주의사항 1. 모든 예시는 크롬 브라우저 기준이다. 2. 플렉스 컨테이너의 시작선과 끝선을 설명할 때 아랍어 방향은 고려하지 않는다. 3. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.
목차
- Display Flex
6-1. Display Flex – flexbox 속성
6-2. Display Flex – flexbox 정렬 속성 요약
6-3. Display Flex – flexbox 정렬 속성
- Display Grid
7-1. Display Grid – grid layout 셀 속성
7-2. Display Grid – grid layout 컨테이너 속성
7-3. Display Grid – grid layout 정렬 속성 요약
7-4. Display Grid – grid layout 정렬 속성
- Multi-column Layout
- Media Query
- 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)
flex-direction으로 설정된 방향으로 정의된다. 주축의 방향은 flex-direction: row 또는 flex-direction: row-reverse가 적용된 경우 inline 방향이고, flex-direction: column 또는 flex-direction: column-reverse가 적용된 경우 block 방향이다.
(2) 교차축(Cross Axis)
주축의 방향의 직각 방향으로 정의된다. 교차축의 방향은 flex-direction: row 또는 flex-direction: row-reverse가 적용된 경우 block 방향이고, flex-direction: column 또는 flex-direction: column-reverse가 적용된 경우 inline 방향이다.
1. 플렉스 컨테이너의 시작선과 끝선
(1) 주축(Main Axis)의 시작선과 끝선
flex-direction의 값이 row여서 주축의 방향이 inline 방향일 때 글자 방향이 한글/영어 방향이라면 주축의 시작선은 맨 왼쪽이고, 끝선은 맨 오른쪽이다. flex-direction의 값이 row-reverse로 변경되어 플렉스 항목의 나열 방향이 반전되어도 주축의 시작선과 끝선의 위치는 고정되어 있다. 만약에 글자 방향이 아랍어 방향이고, flex-direction의 값이 row 또는 row-reverse라면 주축의 시작선이 맨 오른쪽이고, 끝선은 맨 왼쪽이 된다.
그리고 flex-direction의 값이 column이어서 주축의 방향이 block 방향일 때 글자 방향이 한글/영어 방향이라면 주축의 시작선은 맨 위쪽이고, 끝선은 맨 아래쪽이다. flex-direction의 값이 column-reverse로 변경되어 플렉스 항목의 나열 방향이 반전되어도 주축의 시작선과 끝선의 위치는 고정되어 있다.
(2) 교차축(Cross Axis)의 시작선과 끝선
교차축은 주축의 직각이므로 flex-direction의 값이 row 또는 row-reverse여서 교차축의 방향이 block 방향일 때 글자 방향이 한글/영어 방향이라면 교차축의 시작선은 맨 위쪽이고, 끝선은 맨 아래쪽이다. 그리고 flex-direction의 값이 column 또는 column-reverse여서 교차축의 방향이 inline 방향일 때 글자 방향이 한글/영어 방향이라면 교차축의 시작선은 맨 왼쪽이고, 끝선은 맨 오른쪽이다.
○ 플렉스 속성 학습
– 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) 각 플렉스 항목의 너비 값과 성장 계수가 같을 때
– 조건: flex-direction: row(기본값)이고, 플렉스 항목의 너비 값과 성장 계수가 각 30px과 1로 같을 때 플렉스 컨테이너의 너비 값이 150px에서 180px로 30px 만큼 팽창했다.
– 결과: 플렉스 컨테이너의 여유 공간을 각 플렉스 항목이 같이 차지한다.
– 계산: 각 플렉스 항목의 성장 계수의 합은 5이므로 성장 계수가 1인 플렉스 항목의 성장 비율은 1 : 5이다. 각 플렉스 항목의 팽창된 너비 값은 플렉스 컨테이너의 팽창된 너비 값 30px을 성장 비율 1/5로 곱한 6px이 되고, 각 플렉스 항목의 너비 값은 30px에 6px를 더한 36px이 된다.
(2) 각 플렉스 항목의 너비 값이 같고 성장 계수가 1, 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로 구분될 때
– 조건: 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로 구분될 때
– 조건: 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) 각 플렉스 항목의 너비 값과 축소 계수가 같을 때
– 조건: 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로 구분될 때
– 조건: 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로 구분될 때
– 조건: 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로 구분될 때
– 조건: 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) 플렉스 항목의 너비 값과 기본 크기가 같을 때
– 조건: 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 작을 때
– 조건: 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일 때
– 조건: 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 클 때
– 조건: 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이 적용되었을 때
네 번째 플렉스 항목의 위치가 변하지 않는다.
(2) 네 번째 플렉스 항목에만 order: -1이 적용되었을 때
플렉스 항목 중 가장 첫 번째 위치로 이동한다.
(3) 네 번째 플렉스 항목에만 order: 1이 적용되었을 때
플렉스 항목 중 가장 마지막 위치로 이동한다.
(4) 모든 플렉스 항목의 순서대로 order 순번이 적용되고 네 번째 플렉스 항목의 order를 4에서 0으로 변경했을 때
order: 1이 적용된 플렉스 항목의 앞으로 이동한다.
(5) 모든 플렉스 항목의 순서대로 order 순번이 적용되고 네 번째 플렉스 항목의 order를 4에서 2로 변경했을 때
order: 2가 적용된 플렉스 항목이 2개가 되지만 네 번째 플렉스 항목의 html element 순서가 order: 2가 적용된 두 번째 플렉스 항목보다 뒤에 위치하기 때문에 두 번째 플렉스 항목의 뒤로 이동한다.
(6) 모든 플렉스 항목의 순서대로 order 순번이 적용되고 네 번째 플렉스 항목의 order를 4에서 3으로 변경했을 때
order: 3이 적용된 플렉스 항목이 2개가 되지만 네 번째 플렉스 항목의 html element 순서가 order: 3이 적용된 세 번째 플렉스 항목보다 뒤에 위치하기 때문에 화면상의 변화는 없다.
(7) 모든 플렉스 항목의 순서대로 order 순번이 적용되고 네 번째 플렉스 항목의 order를 4에서 6으로 변경했을 때
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일 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 높이를 가득 채운 채 inline 방향의 주축을 따라 주축의 시작선에서 끝선으로 나열된다.
(2) flex-flow: row wrap-reverse, 플렉스 항목의 height 값이 auto일 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 높이를 가득 채운 채 inline 방향의 주축을 따라 주축의 시작선에서 끝선으로 나열되지만 줄바꿈 방향이 반전된다.
(3) flex-flow: column wrap, 플렉스 항목의 width 값이 auto일 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 너비를 가득 채운 채 block 방향의 주축을 따라 주축의 시작선에서 끝선으로 나열된다.
(4) flex-flow: column wrap-reverse, 플렉스 항목의 width 값이 auto일 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 너비를 가득 채운 채 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(기본값)일 때
플렉스 항목이 inline 방향의 주축을 따라 주축의 시작선에서 끝선까지 행으로 나열된다.
(2) flex-direction: row-reverse, flex-wrap:nowrap(기본값)일 때
플렉스 항목이 inline 방향의 주축을 따라 주축의 끝선에서 시작선까지 행으로 나열된다.
(3) flex-direction: column, flex-wrap:nowrap(기본값)일 때
플렉스 항목이 block 방향의 주축을 따라 주축의 시작선에서 끝선까지 열로 나열된다.
(4) flex-direction: column-reverse, flex-wrap:nowrap(기본값)일 때
플렉스 항목이 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(기본값)일 때
플렉스 항목이 한 줄로 배치되어 플렉스 항목의 크기의 합이 플렉스 컨테이너보다 작으면 플렉스 컨테이너 내에 각 플렉스 항목이 지정된 크기로 나열되고, 플렉스 항목의 크기의 합이 플렉스 컨테이너보다 크면 각 플렉스 항목의 크기가 콘텐츠의 최소 크기까지 수축한다. 그리고 각 플렉스 항목의 크기가 콘텐츠의 최소 크기까지 수축했음에도 공간이 부족하다면 플렉스 컨테이너를 넘친다.
(2) flex-direction: row(기본값), flex-wrap: wrap이고, 플렉스 항목의 height 값이 auto일 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 높이를 가득 채운 채 나열된다.
(3) flex-direction: row(기본값)이고, flex-wrap: wrap이고, 플렉스 항목의 height 값이 각 열이 차지할 수 있는 높이보다 작을 때
플렉스 항목이 줄 바꿈되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 지정된 크기를 유지한 채 나열된다. 화면상에는 각 열의 아래쪽에 같은 빈 공간이 형성된 것처럼 보인다.
(4) flex-direction: row(기본값)이고, flex-wrap: wrap이고, 플렉스 항목의 height 값이 각 열이 차지할 수 있는 높이보다 클 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 지정된 크기를 유지한 채 나열되지만, 플렉스 컨테이너를 넘친다.
(5) flex-direction: row(기본값), flex-wrap: wrap-reverse이고, 플렉스 항목의 height 값이 auto일 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 공간의 높이를 가득 채운 채 나열되지만, 줄 바꿈 방향이 반전된다.
(6) flex-direction: row(기본값)이고, flex-wrap: wrap-reverse이고, 플렉스 항목의 height 값이 각 열이 차지할 수 있는 높이보다 작을 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 지정된 크기를 유지한 채 나열되지만, 줄 바꿈 방향이 반전된다. 화면상에는 각 열의 위쪽에 동일한 빈 공간이 형성된 것처럼 보인다.
(7) flex-direction: row(기본값)이고, flex-wrap: wrap-reverse이고, 플렉스 항목의 height 값이 각 열이 차지할 수 있는 높이보다 클 때
플렉스 항목이 줄 바꿈 되는 수만큼 플렉스 컨테이너의 공간이 구분되고 각 플렉스 항목이 지정된 크기를 유지한 채 나열되지만, 플렉스 컨테이너를 넘친다. 그리고 줄 바꿈 방향이 반전된다.