플렉서블 레이아웃 자식 속성 및 데모 - by. UXKM

flex-grow

flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.
만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다.
하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.

보통 flex-grow를 사용할때는, flex-shrink, flex-basis 속성을 함께 사용합니다.
그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 flex 속성을 이용해 축약형으로 사용합니다.

flex item의 너비에 대한 확대 인자(flex grow factor)를 지정하며, 기본값은 0, 적용 가능한 값은 양수 입니다.
값에 음수를 사용하면 적용되지 않습니다.

flex-shrink

flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정합니다.
flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 사용하며, 설정된 숫자 값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다.

기본값은 1, 적용 가능한 값은 양수입니다. 0을 지정하면 축소가 해제되어 원래의 너비를 유지합니다.
참고로 flex-basis 값이 설정되었다면 기존의 width 또는 height 속성 보다 우선 적용됩니다.

w3.org/TR/css-flexbox-1/#flex-shrink-property

감소 너비(flex-shrink)는 요소의 너비에 영향을 받기 때문에 계산이 까다롭습니다.
영향을 받는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미합니다.
flex container의 너비가 줄어 flex Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 flex Item의 너비가 줄어듭니다.

예를 들어 flex container의 너비가 줄어 flex Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 같은 flex Item이 2개이고 flex-shrink가 각각 2와 1이라면,
감소 너비는 2:1 비율이며,
첫 번째 flex Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 flex Item은 90px의 1/3인 30px 만큼 너비가 감소합니다.

다른 예시로 flex container의 너비가 줄어 flex Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 다른 flex Item이 2개이고 요소 너비는 각각 200px과 100px이고,
flex-shrink가 각각 2와 1이라면,
200 x 2 = 400과 100 x 1 = 100 즉 감소 너비는 4:1 비율이며,
첫 번째 flex Item은 90px의 4/5인 72px 만큼 너비가 감소하고,
두 번째 flex Item은 90px의 1/5인 18px 만큼 너비가 감소합니다.

flex-basis

flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.
auto 값을 가지지 않은 flex-basis와 width(flex-direction: column인 경우 height) 값을 동시에 적용한 경우 flex-basis가 우선합니다.
flex item의 너비 기본값을 px, % 등의 단위로 지정하며, 기본값은 auto입니다.
flex-basis 속성값은 content 키워드를 사용하거나, <width>를 나타내는 단위를 사용합니다.

w3.org/TR/css-flexbox-1/#flex-shrink-property

1. <width>

   <length>, 플렉스 컨테이너의 크기에 상대적인 <percentage>, auto 키워드 중 하나. 음수 값은 유효하지 않습니다.

2. content

   플렉스 아이템의 콘텐츠 크기에 따라 자동으로 크기가 변합니다.

   content 키워드는 Flexible Box Layout의 첫 배포에 포함되지 않아, 일부 오래 된 브라우져는 지원하지 않을 수 있습니다.

   flex-basis와 주 크기(width, height) 속성을 동시에 auto로 설정하면 동일한 효과를 볼 수 있습니다.

   원래 flex-basis: auto의 뜻은 자신의 width 또는 height 속성의 값을 사용하라는 것이었습니다.

   그 후 flex-basis: auto는 자동 크기 조절로 바뀌고, 기존의 auto는 main-size로 바뀌었습니다. bug 1032922에서 구현 기록을 볼 수 있습니다.

   그러나 위의 변경점은 bug 1093316에서 되돌려져 auto 가 다시 width / height 속성을 가리키게 됐고, 대신 새로운 content 키워드가 자동 크기 조절을 맡게 됐습니다. (bug 1105111에서 볼 수 있습니다.)

flex

W3C에서는 이 속성을 사용하는 것 보다 개별적으로 기술하는 것을 추천하고 있습니다.

flex item의 너비(증가, 감소, 기본)를 설정하는 단축 속성입니다.
flex item이 flex container가 차지하는 공간에 크기를 맞춰 크기를 키우거나 줄이는 설정을 할 수 있습니다.
flex-grow, flex-shrink, flex-basis의 축약(shorthand) 속성입니다. 기본값은 각각 0, 1, auto입니다.
대부분의 경우, flex의 값에는 auto, initial, none이나 단위 없는 양수를 사용해야 합니다.

flex-grow를 제외한 개별 속성은 생략할 수 있습니다.
만약 flex: 1;로 작성하면 flex-grow: 1;과 같습니다.
그러면 나머지 속성은 생략했으니 기본값이 적용되어 flex-shrink: 1;, flex-basis: auto;가 됩니다.
즉, flex: 1; 혹은 flex: 1 1;은 flex: 1 1 auto;와 같다고 볼 수 있지만 그렇지 않습니다.

flex-basis의 기본값은 auto이지만, 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용됩니다.
다시 정리하면 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;과 같습니다.
이 부분을 기억하지 않으면 엉뚱한 결과가 나올 수 있으니 주의가 필요합니다.

flex 속성은 한 개에서 세 개의 값을 사용해 지정할 수 있습니다.
한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, <flex-basis>의 값은 auto가 아니라 0이 됩니다.

align-self

align-self는 부모 속성인 align-items보다 우선적으로 개별 flex item을 정렬합니다.
기본값은 auto입니다.

※ align-items : flex container속성으로 flex item을 flex container의 수직 방향(cross axis)으로 정렬

w3.org/TR/css-flexbox-1/#propdef-align-self

order

flex item의 배치 순서를 지정합니다.
HTML 코드를 변경하지 flex item에 order 속성값을 지정하는 방식으로 flex item을 간단히 재배치할 수 있다.
기본 배치 순서는 flex container에 추가된 순서이며, 기본값은 0입니다.

단, 순서를 변경해도 접근성에 문제가 발생하지 않는 경우에만 사용해야 합니다.
order 속성을 사용하면 실제 DOM 순서와 화면에 보여지는 콘텐츠의 순서가 서로 연결되지 않습니다.
때문에 시각적 순서(CSS)가 중요하더라도 스크린 리더 사용자는 제대로 된 읽기 순서를 알 수 없습니다.
이는 낮은 시각으로 스크린 리더 등 보조 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다.

w3.org/TR/css-flexbox-1/#order-property

grow, shrink 숫자가 증가, 감소에 따라 계산방법

플렉스 컨테이너 요소에 설정된 주축의 방향은 row 입니다.
즉, 왼쪽 ⇒ 오른쪽 방향입니다. 아이템의 배치는 수평으로 나란히 배치가 됩니다.
아이템에 설정된 flex-basis 값은 너비(width)를 말하게 됩니다.
만약 column 이 설정되면 basis 는 높이(height)를 말하게 됩니다.

플렉스 아이템 요소에 설정된 위의 코드를 보면 다음과 같습니다.
아이템의 shrink 값이 0 이므로 주축 방향으로 basis 값인 50px 보다 축소되지 않습니다.
즉, 최소 50px의 너비(width) 설정입니다. 반면 grow 값은 1 이므로 50px 이상 확장될 수 있습니다.

현재 부모 컨테이너 요소에 별도로 width 너비 값이 설정되지 않았다면 브라우저 창 크기(너비)에 따라 유연한 값을 가집니다.
즉, 창 너비가 고정되지 않은 것입니다.

이이템이 7개 있다고 가정해 봅니다.
아이템의 너비가 50px 이상 확장 되려면 부모의 너비가 아이템 7개의 너비 합(350px) 보다 커야 합니다.
그래야 아이템이 확장될 공간이 생길 것이기 때문입니다.
grow 값은 확장될 공간이 없으면 확장될 수 없습니다.

만약 부모 컨테이너의 너비 값이 500px이 된다고 하면 남은 공간은 500 - 350 = 150px 이 됩니다.
그럼 각 아이템은 150 / 7 = 21.4285px 만큼 공간을 나눠 가지게 됩니다.
즉, 각 아이템은 50 + 21.4285 = 71.4285px 값의 너비로 확장(grow) 됩니다.

다른 예시를 들어보도록 하겠습니다.
아이템 중 3번째 자식 요소인 아이템(3)에 설정된 코드는 아래와 같습니다.

여기서 포인트는 grow 값이 1이 아닌, 2로 설정된 부분입니다.
위 값은 부모 컨테이너 요소의 남은 너비 공간을 나눠 확장할 때 다른 박스보다 2만큼 더 큰 비율로 나눠진 값으로 확장하라는 것입니다.
쉽게 말해 각 아이템 박스가 나눠 가질 공간의 비율은 다음과 같습니다.

1 : 1 : 2 : 1 : 1 : 1 : 1

예를 들어 남은 공간이 70px 이라고 한다면 아이템(3) 요소의 너비는 2/8 = 25% 만큼 확장(17.5px) 하고,
다른 아이템들은 1/8 = 12.5% 만큼(8.75px) 너비 값을 확장하게 됩니다.

((70 * 1/8) * 6) + ((70 * 2/8) * 1) = 70

만약 부모 컨테이너의 너비 값이 500px이 된다고 하면 남은 공간은 500 - 350 = 150px 이 됩니다.

아이템(3)은 남은 공간 중 25% 를 가지니까 150 * 2/8 = 37.5px 만큼 확장 되고,
다른 아이템은 남은 공간 중 12.5% 를 나눠 가질테니 150 * 1/8 = 18.75px 만큼 공간을 나눠 확장됩니다.

shrink 는 축소이니, grow 설정의 반대로 생각하면 됩니다.
부모 컨테이너 너비 값이 아이템 너비의 합보다 작을 경우, 축소가 반영됩니다.
이번에는 부모 컨테이너 너비 - 아이템 너비의 합 = 축소해야 할 공간 이 될 것이고,
이 또한 shrink 설정 값의 비율에 따라 축소해야 할 공간이 브라우저에 의해 계산 처리 반영될 겁니다.

flex-direction, justify-content, align-items Demo

Multi-Column Layout

네이비게션