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

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

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


이 글은 Ohans Emmanuel의 Understanding Flexbox: Everything you need to know을 번역한 글 중 플렉스 방향(flex-direction)과 flexbug 파트를 번역한 글입니다. 이전 내용을 번역한 글은 위의 링크를 확인 하시면 됩니다. 다음 내용은 다음주 중으로 업데이트 하도록 하겠습니다.

Absolute and Relative flex-items

이번 섹션을 들어가기전에, 몇 가지 중요한 개념을 분명히 해야 할 것 같다.

절대적(absolute) 및 상대적(relative) 플렉스 아이템의 차이점은 무엇일까?

이 둘의 주요 차이점은 간격(spacing)과 계산(computed) 방법에 있다.

상대적 플렉스 아이템(relative flex item)의 간격은 컨텐츠 크기에 따라 계산된다. 절대적 플렉스 아이템(absolute flex item)에서는 컨텐츠와 상관없이 "플렉스(flex)"에만 기반한다.

아래 마크업을 참고하자.

<ul>
<li>
This is just some random text to buttress the point being explained.
Some more random text to buttress the point being explained.
</li>
<li>This is just a shorter random text.</li>
</ul>

두 개의 리스트 아이템. 하나는 다른 텍스트보다 훨씬 많은 텍스트가 있다.

스타일을 조금 추가하자.

ul {
display: flex; /*flexbox activated*/
}
li {
flex: auto; /*remember this is same as flex: 1 1 auto;*/
border: 2px solid red;
margin: 2em;
}

결과는 다음과 같다:

이미 잊어 버린 경우 flex: 1 1 autoflex-grow: 1; flex-shrink: 1; flex-basis: auto과 같다. 

앞에서 설정한 프레임워크를 기반으로 플렉스 아이템의 초기 폭이 자동으로 flex-basis: auto로 계산 된 다음 사용 가능 공간에 맞게(flex-grow: 1) "늘어(grow)"난다.

플렉스 아이템의 너비가 자동으로 계산되는 경우(flex-basis: auto)에는 플렉스 아이템에 포함 된 내용의 크기를 기반으로한다.

위 예의 플렉스 아이템은 같은 크기의 컨텐츠가 아니기 때문에, 플렉스 아이템의 크기는 동일하지 않을 것이다.

개별 너비는 처음부터 동일하지 않았기 때문에 (컨텐츠를 기반으로 함) 아이템이 커지면 폭도 동일하게 유지되지 않는다.

위 예의 플렉스 아이템은 상대적 플렉스 아이템이다.

플렉스 아이템을 절대적으로 만들어 보자 - 이번에는 폭이 "플렉스(flex)"가 아닌 컨텐츠 크기를 기반으로해야 함을 의미한다.

"one-liner"는 마술을 부린다.

li {
flex: 1 ; /*same as flex: 1 1 0*/
}

결과를 보자:


두 플렉스 아이템의 폭이 같은 것이 보이는가?

플렉스 아이템의 초기 폭은 flex-basis: 0, 그리고 "확장(grow)"가능한 공간에 맞게 늘어났다.

flex-basis 값이 0 인 플렉스 아이템이 2 개 이상있는 경우에는 flex-grow 값을 기반으로 사용 가능한 간격을 공유한다.

이것에 대해서는 위에서 이미 다뤘으니 참고하자.

이제 폭은 컨텐츠 크기에 따라 계산되지 않는다. 폭은 지정된 플렉스 값을 기반으로한다.

이제 이해 되었는가?

절대적 플렉스 아이템(absolute flex item)은 플렉스(flex)만을 기반으로하는 너비를 갖지만 상대적 플렉스 아이템(relative flex item)은 컨텐츠 크기를 기준으로 너비를 갖는다.

Auto-margin Alignment


플렉스 아이템에서 margin: auto 정렬을 주의하자.

플렉스 아이템에 margin: auto를 사용하면 매우 이상하게 보일 수 있다.

무슨 일이 일어나는지 정확히 이해할 필요가 있다.

플렉스 아이템에서 margin: auto를 사용하면 auto 값을 갖는 방향 (왼쪽, 오른쪽 또는 양쪽 모두)으로 빈 공간을 채운다.

쉽게 이해가 가지 않을 수 있다.

이게 무슨 말인지 자세히 설명 하도록 하겠다.

다음과 같이 스타일이 지정된 네비게이션 바(navigation bar)가 있다고 생각해보자:

<ul>
<li>Branding</li>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
ul {
display: flex;
}
li {
flex: 0 0 auto;
}

아래의 결과를 보자:


여기에 유의해야 할 몇 가지가 있다:

  1. flex-grow 값은 0으로 설정된다. 이것이 리스트 아이템이 커지지 않는 이유다.
  2. 플렉스 아이템은 주축(main-axis)의 시작에 정렬된다 (기본 동작).
  3. 아이템이 주축(main-axis)의 시작 부분에 정렬되어 있기 때문에 오른쪽에 약간의 여유 공간이 남는다. 보이는가?

이제 첫 번째 리스트 아이템(Branding)에 margin: auto를 추가하면 어떻게 되는지 확인하자.

li:nth-child(1) {
margin-right: auto; /*applied only to the right*/
}
'Branding'에 margin-right: auto 적용

방금 무슨일이 일어났는가?

여분의 공간(extra space)이 첫 번째 플렉스 아이템의 오른쪽으로 이동 됐다.


이전에 다뤘던 내용을 기억하는가?

플렉스 아이템에서 margin: auto를 사용하면, auto 값을 갖는 방향 (왼쪽, 오른쪽 또는 양쪽 모두)이 빈 공간을 차지하게 된다.

플렉스 아이템의 양쪽 모두에 자동 margin 정렬을 한다면 어떻게 될까?

/*you may use the margin shorthand to set both sides if you wish*/
li:nth-child(1) {
margin-left: auto;
margin-right: auto
}
"branding"엘리먼트 양쪽에 margin:auto 적용 

이제 이 공간은 플렉스 아이템의 양쪽에 분산된다.

그렇다면 auto-margin을 사용 했을때 문제는 없을까?

한가지 문제가 있다. 주의를 기울이지 않으면 좌절의 원인이 될 수 있기 때문이다.

플렉스 아이템에서 auto-margin 정렬을 사용하면 justify-content 속성이 더 이상 작동하지 않는다.

예를 들어 justify-content 속성을 통해 위의 플렉스 컨테이너에 다른 맞춤 옵션을 설정해도 레이아웃에 아무런 영향을 미치지 않는다.

ul {
justify-content: flex-end;
}
justify-content는 아무런 영향을 주지 않는다.

실제 사용 사례

네비게이션은 모든 웹사이트 또는 애플리케이션에서 매우 큰 부분을 차지한다. 모든 웹 사이트에는 일종의 네비게이션 시스템이 있다.

이 유명한 사이트가 어떻게 네비게이션을 구성했는지 살펴보자.

Flexbox를 통해 이러한 레이아웃을보다 효율적으로 구축하는 방법에 대해서 알고 있는가?

auto-margin 기능이 매우 편리하게 사용될 수 있는 곳을 자세히 살펴보자.

(i) Bootstrap Navigation


(ii) AirBnB desktop Navigation


(iii) Twitter desktop Navigation



실제로 코드를 작성해보는 것이 좋다.

네비게이션 시스템을 직접 구현해보자.

여기서 필요로하는 모든 내용은 이미 다 알고 있을 것이다. 코딩을 시작할 용기가 조금만 있는것으로 충분하다.

다음 섹션에서 보자.

네비게이션 시스템 코딩 연습을 마친 후이기를 바라며 :-)

플렉스 방향(flex-direction)을 바꾸면 어떻게 될까?

경고: 이상한(weird) 현상을 볼 수 있음.


나는 플렉스 모델을 공부하기 시작했을 때, 이 부분이 가장 혼란스러웠다.

"플렉스 세상"에 많은 초보자들(newcomers) 역시 그럴거라고 생각한다.

기본적으로 주축(main-axis) 및 교차 축(cross-axis)은 "왼쪽에서 오른쪽"방향 "위에서 아래"방향으로 배치 된다고 얘기한 것을 기억하는가?

이전 섹션에서 설명한대로 이런 방향을 flex-direction: column을 사용해서 바꿀 수 있다.

flex-direction: column을 사용하면 아래 그림과 같이 주축과 교차축이 변경된다.

기본 주축과 교차축
새로운 주축과 교차축

영어로 글을 작성한 적이 있다면 글이 왼쪽에서 오른쪽으로 그리고 위에서 아래로 작성되는 것을 이미 알고있는 것이다.

Flexbox의 기본 주축 및 교차축도 이와 동일한 방향으로 되어있다.

하지만 플렉스 방향(flex-direction)을 컬럼(column)으로 변경하면, 더이상 "영어"의 패턴이 아닌 일본어의 패턴을 사용하게 된다!

그래 맞다, 일본어.

일본어로 글을 작성해본적이 있다면 익숙 할 것이다. (나는 일본어로 글을 한 번도 써본적이 없다.)

일본어 텍스트는 전통적으로 위에서 아래로 쓰여진다!

이것이 왜 영어를 쓰는 사람들에겐 다소 혼란스러울 수 있는지 설명한다.


아래의 예를 살펴보자. 이번에는 flex-direction을 변경한 것을 제외하곤, 기본 3 개의 리스트 아이템이 있는 정렬되지 않은 리스트(ul)이다.

<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul {
display: flex;
flex-direction: column;
}

방향을 바꾸기 전의 모습은 다음과 같다:

방향을 변경 한 후:


정말 Flexbox로 해결 한다고?


많은 디자이너들이 CSS를 작성 할 때 직면하는 전형적인 문제들은 Flexbox로 간단히 해결되었다.

Philip Waltonsolved-by-flexbox 프로젝트에서 6 가지 전형적인 문제를 보여줬다 (이 글을 쓰는 시점에서).

그는 이전에 CSS가 갖고 있는 제한 사항에 대해 광범위하게 논의하고 Flexbox가 제공하는 현재 솔루션에 대해 설명한다.

이 글을 다 읽은 후에 살펴 보기 바란다.

연습 섹션에서 Flexbox로 음악 앱 레이아웃을 작성하는 과정에서 그가 다루는 몇 가지 개념에 대해 설명하겠다.

호환되지 않는 브라우저를 위한 Flexbugs와 gotchas

github 저장소를 한 번 확인 해보는 것이 좋을 것이다.

이것은 나보다 똑똑한 사람들이 Flexbox 버그 리스트와 이것을 해결 할 수 있는 방법에 대해서 정리한 저장소이다.

내가 예상 한대로 뭔가가 작동하지 않을 때 내가 제일 먼저 확인하는 곳이다.

나는 다음에 연습 섹션에서 몇 가지 중요한 버그를 통해 이것에 대해 다룰 것이다.


리뷰