[디자인] 5분 안에 Flexbox 배우기

인기있는 레이아웃 모듈에 대한 간략한 소개
presentation
이 글에서는 지난 몇 년 동안 웹 개발자와 디자이너에게 꼭 필요한 기술인 CSS Flexbox의 기본 사항을 배우게됩니다.
우리는 Navbox를 예로 사용합니다. Flexbox의 전형적인 사용 사례입니다. 이것은 가장 중요하지 않은 모듈을 제외하고 모듈의 가장 많이 사용되는 속성을 소개합니다.
또한 Flexbox에서 무료 12 부분 과정을 만들었습니다. 관심이 있으시면 여기를 클릭하십시오!

이제 시작하겠습니다!

당신의 첫 번째 Flexbox 레이아웃

Flexbox 레이아웃의 두 가지 주요 구성 요소(components)는 컨테이너(container)와 항목(items)입니다.
다음은 세 가지 항목(items)이있는 컨테이너(contains)를 포함하는 예제의 HTML입니다.
<nav class="container"> <div>Home</div> <div>Search</div> <div>Logout</div> </nav>
이를 Flexbox 레이아웃으로 바꾸기 전에 </ div> 요소가 다음과 같이 겹쳐서 표시됩니다.
presentation
스타일을 조금 추가했지만 Flexbox와는 아무런 관련이 없습니다.
이것을 Flexbox 레이아웃으로 바꾸려면 컨테이너(container)에 다음 CSS 속성을 지정하기 만하면됩니다.
.container { display: flex; }
그러면 항목이 가로 축(horizontal axis)을 따라 자동으로 배치됩니다.
presentation

실제 코드를 확인하고 싶다면이 Scrimba playground.에서 확인 할 수 있습니다.
이제 이 항목(items)들을 조금 뒤섞어 봅시다.

Justify content and Align items 콘텐츠 정렬 및 항목 정렬

Justify-content align-items은 컨테이너(container)에 항목(items)을 배포하는 데 도움이되는 두 가지 CSS 속성입니다. 항목이 기본 축(main axis)과 교차 축(cross axis)을 따라 배치되는 방법을 제어합니다.
우리의 경우 (항상 그런 것은 아님) 주축(main axis)은 수평(horizontal)이고 교차 축(cross axis)은 수직(vertical)입니다 :
presentation

In this article, we’ll only look at justify-content, as I’ve found to be using this one much more than align-items. However, in my Flexbox course, I explain both properties in detail.
이 기사에서는 justify-content에 대해서만 살펴볼 것입니다. align-item보다 훨씬 많은 것을 사용했기 때문입니다. 그러나 Flexbox 과정에서는 두 속성에 대해 자세히 설명합니다.
justify-content를 사용하여 주축(main axis)을 따라 모든 항목(items)을 가운데(center)로합시다.
.container { display: flex; justify-content: center; }

presentation
또는 다음과 같이 항목(items) 사이에 공백을 추가하는 space-between으로 설정할 수 있습니다.
.container { display: flex; justify-content: space-between; }
presentation
justify-content에 설정할 수있는 값은 다음과 같습니다.
  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
나는 이것들을 가지고 놀고 그들이 페이지에서 어떻게 플레이하는지 보길 권한다. 그것은 당신에게 개념에 대한 올바른 이해를 제공 할 것입니다.

Controlling a single item 단일 항목 제어

우리는 또한 단일 항목(items)을 제어 할 수 있습니다. 예를 들어 처음 두 항목(items)을 왼쪽에두고 싶지만 로그 아웃 버튼을 오른쪽으로 이동한다고합시다.
이를 위해 여백(margin)을 자동으로 설정하는 좋은 기법을 사용합니다.
.logout { margin-left: auto; }
presentation
검색 항목(item)과 로그 아웃 항목(item)을 모두 오른쪽으로 밀어 넣으려면 검색 항목(item)에 margin-left 을 남기면됩니다.
.search { margin-left: auto; }
검색 항목을 가능한 한 오른쪽으로 밀면 다시 로그 아웃 항목이 표시됩니다.
presentation

The flex property | flex 속성

지금까지는 고정 너비의 항목 (fixed-width items)만 있었습니다. 그러나 우리가 그들을 반응적(responsive)으로 하고 싶다면 어떻게해야할까요? 이를 위해 우리는 flex라는 속성을 가지고 있습니다. 그것은 백분율을(percentages) 사용하는 이전 방법보다 훨씬 쉽게 만듭니다.
모든 항목(items)을 대상으로 지정하고 flex 값을 1로 지정합니다.
.container > div { flex: 1; }
presentation
보시다시피 전체 컨테이너(container)를 채우기 위해 항목(items)을 늘입니다.
대부분의 경우 항목(items) 중 하나가 여분의 너비(width)를 차지하고 유연한 너비(width)를 가지도록 설정하는 것이 좋습니다. 예를 들어 검색 항목(items)이 모든 추가 공간을 차지할 수 있습니다.
.search { flex: 1; }
presentation
이 글을 끝내기 전에 flex 속성이 실제로 flex-grow, flex-shrinkflex-basis라는 속기 속성이라는 것을 알려드립니다. 그러나 학습에 5 분 이상 소요되므로이 튜토리얼의 범위를 벗어납니다.
하지만 학습에 관심이 있다면, 무료 Flexbox 과정에서 세 가지 속성을 전부 설명 할 것입니다.
이제 당신은 내 기본 수업을 수강하고 Flexbox 마스터가 될 수있는 기초를 배웠습니다!

번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정고 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역글입니다. 원본링크입니다.