도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

2 - Flexbox 이해: 당신이 알아야 할 모든 것 (Understanding Flexbox: Everything you need to know)

이 글은 Ohans Emmanuel의 Understanding Flexbox: Everything you need to know을 번역한 글 중 플렉스 아이템 프로퍼티(The Flex Container Properties)를 번역한 글입니다. 이전 내용을 번역한 글은 위의 링크를 확인 하시면 됩니다. 다음 내용은 다음주 중으로 업데이트 하도록 하겠습니다.

Flex Item Properties

Order || Flex-grow || Flex-shrink || Flex-basis


이전 섹션에서는 플렉스 컨테이너(flex-container)와 정렬(alignment) 속성에 대해 설명했다.

정말로 아름답다.

앞으로 설명해야 할 것이 어떤 것일지 짐작 할 것이다.

이제 플렉스 컨테이너에서 벗어나 플렉스 아이템과 이것의 정렬 속성을 살펴 보겠다.

플렉스 컨테이너와 마찬가지로 몇 가지 정렬 속성은 플렉스 아이템에서도 사용할 수 있다.

하나씩 차근차근 알아보자.

1. Order

order 속성을 사용하면 컨테이너 내의 플렉스 아이템을 재정렬(reordering) 할 수 있다.

기본적으로 order 속성을 사용하면 플렉스 아이템을 한 위치에서 다른 위치로 이동할 수 있다. "sortable" 리스트처럼 할 수 있다는 것이다.

이것은 HTML 코드와는 상관없이 이뤄진다. 즉, HTML 소스 코드에서 플렉스 아이템의 위치가 변경되지 않는다.

order 속성의 기본값은 0이다. 음수 또는 양수 값을 가질 수 있다.

플렉스 아이템은 order 속성의 숫자 값을 기반으로 재배열된다는 점을 유의하자. 최저 값(lowest)에서 최고 값(highest)까지.

아래의 정렬되지 않은 목록(unordered list) 예제를 살펴보자:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

기본적으로 플렉스 아이템의 order 값은 모두 0이다.

예상했던대로, 기본적인 스타일링을 추가하면 아래와 같다.


플렉스 아이템은 HTML 소스 순서대로 표시된다. 플렉스 아이템 1, 2, 3, 4.

만약 어떤 이유로 HTML 소스를 변경하지 않고 플렉스 아이템의 첫번째 아이템이 마지막에 나타나기를 원한다면?

여기서 "소스를 변경하지 않고"는 이 아래를 의미한다:

<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>

여기서 order 속성이 필요한 것이다.

플렉스 아이템 1의 order 값을 다른 리스트 아이템보다 높게 만들기만 하면 된다.

블록 엘리먼트에 z-index 속성을 사용한 적이 있다면 이런 종류의 것을 잘 알고있을 것다.

/*select first li element within the ul */
li:nth-child(1) {
order: 1; /*give it a value higher than 0*/
}

플렉스 아이템은 가장 낮은 값에서 가장 높은 값 순으로 재배열 된다.

기본적으로 리스트 아이템 2, 3, 4의 순서 값은 모두 0임을 잊지 말자.

이제 플렉스 아이템 1의 order 값은 1이 됐다.

플렉스 아이템 1의 order 값을 변경 한 후의 새로운 모습

플렉스 아이템 2, 3, 4의 order 값은 모두 0이다. HTML 소스는 변경없이 그대로이다.

플렉스 아이템 2에 2의 order 값을 주면 어떻게 될까?

그렇다. 이것은 스택(stack)도 올라간다. 이제는 플렉스 아이템 2가 가장 높은 order 값을 나타낸다.

플렉스 아이템 2가 더 높은 order 값을 가짐

그렇다면, 두 플렉스 아이템의 order 값이 같은 경우는 어떻게될까?

아래 예제에서 플렉스 항목 1과 3에는 동일한 order 값을 넣어보자.

li:nth-child(1) {
order: 1;
}
li:nth-child(3) {
order: 1;
}
플렉스 아이템 1과 3은 동일한 order 값을 가짐

아이템은 여전히 낮은 값에서 높은 값으로 배열된다.

이번에는 플렉스 아이템 3이 소스 파일 (HTML 문서)에서 플렉스 아이템 1 다음에 위치하기 때문에 마지막으로 배치된다.

재배열(re-ordering)은 두 개 이상의 플렉스 아이템의 순서 값이 같을 때 소스 파일의 위치를 기반으로한다.

이것에 대해서 충분히 설명한 것 같다.

다른 속성으로 넘어가 보자.

2. flex-grow and flex-shrink

플렉스 아이템의 장점은 "유연함"에 있다.

flex-growflex-shrink 속성 덕분에 이 "유연함"을 더욱 효과적으로 활용할 수 있다.

flex-growflex-shrink 속성은 여분의 공간이 있다면 플렉스 아이템을 "확장(grow)" 해야하는지, 또는 여분의 공백이 없다면 "축소(shrink)"해야 하는지를 제어한다.

0에서 임의의 양수의 값을 가질 수 있다. 0 || 정수

이해하기 쉽게 설명 하도록 하겠다.

아래의 간단한 정렬되지 않은 목록을 보자. 딱 하나의 목록 아이템만 가지고 있다.

<ul>
<li>I am a simple list</li>
</ul>
ul {
display: flex;
}

스타일을 조금 추가하면 이런 모습이 된다.


기본적으로 flex-grow 속성은 0으로 설정된다. 즉, 플렉스 아이템은 사용 가능한 전체 공간에 맞게 확장되지 않는다.

값 0은 "끄기" 스위치라고 할 수 있다. flex-grow 스위치가 꺼져있는 것이다.

그러나 flex-grow 값을 1로 변경하면 다음과 같은 결과가 된다.

플렉스 아이템이 확장(grow)되서 사용 가능한 공간을 채운다.

플렉스 아이템은 현재 사용 가능한 공간을 모두 차지하기 위해 "확장된다(grow)". 스위치가 켜진 것이다!

브라우저를 리사이즈하면 플렉스 아이템이 새 화면 너비에 맞게 "축소(shrink)" 된다.

왜일까? 기본적으로 shrink 속성은 1로 설정되기 때문이다. 이는 flex-shrink 스위치가 켜져 있음을 의미한다!

여러분이 이것에 대해 확실하게 이해하지 못했다면, 잠시 후에 flex-growflex-shrink 속성을 좀 더 자세히 살펴보도록 할 것이다.

3. flex-basis

내가 플렉스 아이템의 장점이 "유연함"에 있다고 말한 것을 기억 하는가? 당신도 그걸 통제 할 수있는 것처럼 보인다.

 flex-grow 또는 flex-shrink 속성이 컨테이너에 맞게 크기를 조정하기 전에 flex-basis 속성은 플렉스 아이템의 초기 크기를 지정한다.

방금 언급한 것은 정말로 중요하다. 그래서 이것을 확실하게 집고 넘어가기 위해 조금더 시간을 할애하도록 하겠다.

기본값은 flex-basis: auto다. flex-basis 일반적인 너비(width) 속성에서 사용하는 모든 값을 취할 수 있다. 즉, percentages(%) || ems || rems || pixels

basis 속성을 0으로 설정하려고 할 때도 단위(unit)를 사용하는 것에 주목하자.  flex-basis: 0이 아닌 flex-basis: 0px로 사용해라.

다시 "하나의 목록"예제를 사용 하겠다.

<ul>
<li>I am a simple list</li>
</ul>
ul {
display: flex
}
li {
padding: 4px; /*some breathing space*/
}

기본적으로 플렉스 아이템의 초기 너비는 기본값인 flex-basis: auto의 영향을 받는다.

플렉스 아이템의 너비는 컨텐츠 크기에 따라 "자동"으로 계산된다 (당연히, 패딩도 포함된다).


즉, 플렉스 아이템의 컨텐츠를 늘리면 자동으로 크기가 조정된다.

<ul>
<li>I am a simple list AND I am a simple list</li>
</ul>
너비가 자동으로 계산된다.

그러나 플렉스 아이템을 고정 너비로 설정 하려면 다음과 같이하면 된다:

li {
flex-basis: 150px;
}

이제 플렉스 아이템 너비는 150px로 제한되었다.

조정된 폭의 플렉스 아이템

점점 더 재미있어지고 있지 않은가.

4. flex shorthand

flex shorthand는 flex-grow, flex-shrinkflex-basis 속성을 한꺼번에 설정할 수 있게한다.

 필요한 경우, 개별적으로 수행하는 것보다 flex shorthand를 사용하여 세 가지 속성을 모두 한꺼번에 설정하는 것이 좋다.

li {
flex: 0 1 auto;
}

위의 코드는 이 세 가지 속성을 설정하는 것과 같다. flex-grow: 0; flex-shrink: 1; flex-basis: auto

순서에 주의하자.

먼저 flex-grow 후에 flex-shrinkflex-basis. 줄여서 쓴다면 GSB가 도움이 될 수 있다.

flex-shorthand에 값 중 하나를 설정하지 않으면 어떻게될까?

flex-growflex-shrink 값만 설정하면 flex-basis는 기본값인 0이 된다.

이를 absolute flex라고 한다. flex-basis만 설정하면 relative flex가 된다.

/*이것이 absolute flex item이다.*/
li {
flex: 1 1; /*flex-basis defaults to 0*/
}
/*이것이 relative flex item이다.*/
li {
flex-basis: 200px; /*only flex-basis is set*/
}

그렇다면, relativeabsolute 플렉스의 목적은 무엇일까?

이 글의 뒷부분에서 이 질문에 답하도록 하겠다. 지금은 나를 믿고 계속 따라와주길 바란다.

매우 유용한 flex shorthand 값을 살펴 보자.

1. flex: 0 1 auto

/*다시, "li"는 flex-item을 나타낸다.*/
li {
flex: 0 1 auto;
}

이는 flex: default를 작성하는 것과 동일하며 모든 플렉스 아이템의 기본 값이다.

여기의 값들을 풀어 헤쳐보자.


flex-basis 속성을 먼저 보면 더 쉽게 이해 할 수 있을 것이다.

flex-basisauto로 설정된다. 즉, 플렉스 아이템의 초기 폭은 내용의 크기에 따라 자동으로 결정된다.

이해 되었나?

다음으로 flex-grow 속성 값은 0이다. 이것은 flex-grow 속성이 플렉스 아이템의 초기 폭을 변경하지 않는다는 것을 의미한다.

확장(grow) 스위치가 꺼져 있는 것이다.

flex-grow 플렉스 아이템의 "확장(grow)"을 제어하고 0으로 설정되기 때문에 플렉스 아이템은 화면에 맞게 "커지지" 않는다.

마지막으로, flex-shrink 값은 1이다.이 말은 - "필요하다면 플렉스 아이템을 줄인다(shrink)"와 같다.

다음은 플렉스 아이템에 적용했을 때의 모습이다.

flex: 0 1 auto

플렉스 아이템이 늘어나지(grow) 않는 것에 주목하자. 폭은 자동으로 계산되며  브라우저 크기를 조정하면 줄어든다(shrink).

2. flex: 0 0 auto

/*again, the "li" represents any list-item*/
li {
flex: 0 0 auto;
}

이것은 flex: none과 같다.

앞에서 설정한 동일한 프레임워크를 사용하면 폭은 자동으로 계산되지만 플렉스 아이템은 확대(grow)되거나 축소(shrink)되지 않는다 (둘 다 0으로 설정 됨).

확대 및 축소 스위치는 모두 꺼져 있다.

그것은 기본적으로 초기(initial) 폭이 플렉스 아이템의 컨텐츠 크기를 기반으로하는 고정 너비 엘리먼트이다.

이 flex shorthand가 두 플렉스 아이템에 어떻게 영향을 미치는지보자. 컨텐츠 길이가 길어지면 플렉스 아이템의 폭도 넓어진다.

Flex: 0 0 auto

가장 먼저 주목해야 할 점은 플렉스 아이템의 폭이 서로 다르다는 것이다.

이는 컨텐츠 크기에 따라 너비가 자동으로 계산되기 때문이다.

브라우저의 크기를 조정해도 플렉스 아이템의 너비가 줄어들지 않는다는 것을 확인 할 수 있다. 플렉스 아이템이 부모 엘리먼트를 벗어나게 되서, 컨텐츠를 보려면 브라우저를 가로로 스크롤해야한다.

걱정하지 말자. 나중에 이러한 이상한 행동을 어떻게 처리 할 수 있는지 보여주도록 하겠다.

브라우저 크기를 조정해도, 플렉스 아이템은 줄어들지(shrink) 않는다. 대신, 플렉스 컨테이너에서 튀어(pop out) 나온다.

3. flex: 1 1 auto

이것은 flex: auto와 동일하다.

앞서 설정 한 프레임워크를 사용하자.

이것은 "자동으로 초기 너비를 계산하지만 사용 가능한 전체 공간에 맞게 증가(grow)하고 필요한 경우 축소(shrink)된다"는 것을 의미한다.

확대 및 축소 스위치가 켜지고 너비가 자동으로 계산된다.

flex: 1 1 auto

이번에는 플렉스 아이템이 사용 가능한 공간을 가득 채우고 브라우저의 크기를 줄이면 따라서 축소된다.

4. flex: "양수"

여기서 "양수(positive number)"는 양수를 나타낸다 (따옴표 제외)

이것은 flex: "양수" 1 o과 같다.

flex: 2 1 0flex: 2와 같다. 여기서 2는 양수를 나타낸다.

/* 다시 말하지만, "li"는 리스트 아이템을 나타낸다. */
li {
flex: 2 1 0; /*flex: 2와 같다.*/
}

앞에서 설정한 프레임워크와 마찬가지로 플렉스 아이템의 초기 너비를 0으로 설정하고 사용 가능한 공간을 채우도록 아이템을 늘린 다음 가능한 경우 아이템을 축소한다.

플렉스 아이템에 "폭(width)이 없는" 경우 폭은 어떻게 계산될까?

flex-grow 값에 따라 플렉스 아이템이 "확장(widen)"되는 정도를 결정한다.

이것은 플렉스 아이템의 너비가 없는 문제를 처리한다.

플렉스 아이템이 두 개 이상일 때 플렉스 아이템의 초기 폭, flex-basis가 0을 기준으로하는 값(예를들어, 0px)으로 설정되어있는 경우라면 이 flex shorthand를 사용하는 것이 더 실용적이다.

실제로는 플렉스 아이템의 너비가 flex-grow 값의 비율에 따라 계산된다.

아래에 두 개의 리스트 아이템을 보자.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>
ul {
display: flex;
}
/*first flex-item*/
li:nth-child(1) {
flex: 2 1 0; /*same as just writing flex: 2*/
}
/*second flex-item*/
li:nth-child(2){
flex: 1 1 0;
background-color: #8cacea;
}

flex-grow: 1로 설정하면 플렉스 아이템이 사용 가능한 공간을 채운다. 확대 스위치가 켜져 있는 것이다.

만약에 두 가지 플렉스 아이템이 있다고 생각해보자. 하나는 flex-grow 속성이 1이고 다른 하나는 2라면 어떻게 될까?

두 항목 모두에 대해 확대 스위치가 켜져 있는 것이다. 그러나 확대될 크기는 1과 2로 다르다.

둘 다 사용 가능한 공간을 채우기 위해 확장되지만 어느 정도의 비율로 확장이 될 것이다.

다음은 동작 방식이다.

후자는 사용 가능한 공간의 2/3을 차지하지만 전자는 1/3을 차지한다.

기본적인 비율(ratio) 값이다. 개별 비율을 총 비율로 나눈 값으로 확대 된다. 개별 비율/총 비율  

공간을 공유하는 플렉스 아이템

무슨 일이 일어나고 있는지 보이는가?

두 플렉스 아이템은 거의 같은 크기의 컨텐츠를 가지고 있지만, 다른 공간을 차지한다.

컨텐츠 크기를 기반으로 하지않고 확대(grow) 값을 기반으로 폭이 계산된다.

앞의 플렉스 아이템의 크기는 다음 컨텐츠의 두 배에 해당한다.

5. align-self

align-self 속성은 플렉스 아이템을 더 세밀하게 컨트롤 할 수 있도록 한다.

우리는 align-items 속성으로 플렉스 컨테이너 내의 모든 플렉스 아이템을 일괄적으로 정렬하는데 사용 되는 것을 위에서 확인 했다.

인접한(neighboring) 플렉스 아이템에 영향을주지 않고, 단일 플렉스 아이템의 위치를 교차 축(cross-axis)을 따라 변경하고자 한다면 어떻게해야할까?

이것은 align-self 속성을 이용하면 된다.

이 속성은 다음 값 중 하나를 가질 수 있다: auto || flex-start || flex-end || center || baseline || stretch

/*첫 번째 리스트 아이템 대상*/
li:first-of-type {
align-self: auto || flex-start || flex-end || center || baseline || stretch
}

These are values you’re already familiar with, but as a refresher here’s how they affect a particular targeted item.

In this case, the first item within the container.

The targeted flex-item is in red.

이것들은 이미 알고있는 값 들이다. 하지만, 이 값들이 특정 아이템에 어떻게 영향을 주는지 다시 한 번 생각해보자.

이 경우 컨테이너 내의 첫 번째 아이템이다.

타겟 플렉스 아이템은 빨간색이다.

1. flex-end

flex-end는 타겟 아이템을 교차 축의 끝에 정렬한다.

2. center

center는 타겟 아이템을 교차 축의 중심에 맞춘다.

3. stretch

stretch는 교차 축을 따라 사용 가능한 공간을 채우기 위해 타겟 플렉스 아이템을 "늘린다".

4. baseline

baseline은 기준선을 따라 타겟 플렉스 아이템을 정렬한다.

그것은 flex-start와 같이 보이지만 기준선이 무엇인지 이해하고있을 것이다.

기준선에 대해서는 이미 위에서 다뤘다.

5. auto

auto는 타겟에 지정된 플렉스 아이템의 값을 부모의 align-items 값으로 설정하거나 엘리먼트에 부모가없는 경우 늘린다(stretch).

아래의 경우, 플렉스 컨테이너는 flex-startalign-items 값을 갖는다.

이렇게하면 모든 플렉스 아이템이 교차 축의 시작에 정렬된다.

이제 타겟 플렉스 아이템은 flex-start 값, 즉 부모의 align-items 값을 상속받는다.


아래의 소스는 위에서 사용 된 플렉스 아이템의 기본 스타일이다.

ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-start; /*affects all flex-items*/
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
font-size: 2rem;
}

이제 당신은 재미있는 부분을 다룰 준비가 됐다. :-)


리뷰