Flexbox는 무엇입니까 (그리고 사용해야하는 이유)

하루 종일 깨끗한 섹션을 만들 수 있지만 모든 화면 크기의 요소를 정렬하면 의도적 인 디자인보다 시행 착오처럼 느껴질 수 있습니다.

Flexbox는이를 수정합니다. 마진과 패딩을 지속적으로 조정하지 않고 요소가 컨테이너 내부에 앉아, 스트레칭, 수축 및 감싸는 방식을 실제로 제어 할 수 있습니다. 이 안내서에서는 Flexbox의 작동 방식, 레이아웃을 단순화하는 방법 및 단일 코드 라인을 쓰지 않고 Divi 5 내에서 시각적으로 사용하는 방법을 분류합니다.

Flexbox는 무엇입니까?

Flexible Box 레이아웃이 짧은 Flexbox는 요소가 컨테이너 내부에 스스로 정렬되고 공간을 단순화하는 레이아웃 모델입니다. Flexbox는 마진이나 고정 너비를 사용하여 각 항목을 수동으로 포지셔닝하는 대신 사용 가능한 공간에 따라 해당 요소가 어떻게 행동 해야하는지 정의 할 수 있습니다.

추가 공간을 채우기 위해 요소가 자라야합니까? 공간이 빡빡하면 축소? 더 이상 맞지 않을 때 다음 줄로 감아 야합니까? 컨테이너와 어린이에게 적용하는 일련의 속성을 통해 이러한 선택을합니다. 이것이 레이아웃이 어떻게 반응 해야하는지 결정하는 방법입니다.

이것을 이해하기 위해 실제적인 예를 들어합시다. 수평 행 안에 3 개의 버튼이 있다고 가정 해 봅시다. Flexbox를 사용하면 컨테이너 내부를 골고루 중앙에 넣을 수 있습니다.

중간 버튼이 다른 공간보다 더 많은 공간을 차지해야한다고 결정하십시오.

또는 화면이 더 좁아지면 버튼이 자동으로 쌓일 수 있습니다.

Flexbox는 정당화 컨텐츠, Flex-Wrap 및 Flex-Grow와 같은 간단한 속성 으로이 모든 것을 가능하게합니다.

또한, 건축업자의 실제 위치를 변경하지 않고 항목이 간격, 다른 축에 정렬되고 시각적으로 주문되는 방법을 제어 할 수 있습니다. 컨텐츠를 중앙으로 중앙에 올릴 수 있고, 컨테이너의 상단 또는 하단으로 밀고, 하나의 항목을 나머지와 다르게 정렬하거나, 심지어 전체 순서를 중단 점을 통해 반전시킬 수 있습니다.

당신은 생각할 수 있습니다 : 나는 이미 마진과 패딩으로 이것을 할 수 없습니까?

당신 말이 맞아요. 요소를 수동으로 중앙으로 중앙으로 중앙으로 또는 사용자 지정 너비로 조정할 수 있습니다. 그러나 이러한 방법은 각 항목을 개별적으로 배치하는 데 의존합니다. 각 스크린 크기에 대해 각 요소를 한 번에 하나씩 조정합니다.

Flexbox는 프로세스를 완전히 이동시킵니다. 각 요소를 개별적으로 처리하는 대신 컨테이너 레벨에서 레이아웃 규칙을 한 번 정의 할 수 있습니다. 당신은 컨테이너에게 아이들이 다른 시나리오에서 어떻게 행동 해야하는지 알려주고 필요에 따라 조정합니다.

이 접근법은 특히 화면 크기가 변경되거나 새 모듈이 추가 될 때 디자인이 발전함에 따라 레이아웃을보다 일관되고 관리하기 쉽고 더 유연하게 만듭니다.

플렉스 방향이 정렬에 미치는 영향

Flexbox에서 첫 번째 선택 중 하나는 행이나 열이든 요소가 흐르는 방향입니다. 플렉스 방향 속성은이를 설정하고 컨테이너 내부에서 항목이 정렬, 포장 및 공간을 정의하는 방법을 정의합니다.

정당화 및 정렬 컨텐츠와 같은 일반적인 속성은 전적으로 어떤 방향으로 설정되는지에 따라 달라지기 때문에 이것을 더 잘 이해합시다. 그들은 브라우저의 기본 레이아웃에서 작동하지 않지만 Flexbox에서 생성 된 축 : 메인 축 및 교차 축 . 주요 축은 플렉스 방향으로 설정 한 방향 : 행의 수평, 열의 수직을 따릅니다. 교차 축은 다른 방식으로 간다 : 행의 수직, 열의 수평.

따라서 방향이 행으로 설정되면 기본 축이 왼쪽에서 오른쪽으로 작동합니다. 즉, 정당화 컨텐츠는 행을 가로 질러 요소를 이동하고 정렬 항목은 해당 행 내에서 수직으로 정렬하는 방법을 제어합니다.

방향을 열로 전환하면 전체 정렬 로직이 뒤집 힙니다. 메인 축은 이제 위쪽으로 실행되므로 정당화 컨텐츠는 항목을 수직으로 정렬하고 정렬 항목은 왼쪽에서 오른쪽으로 위치를 조정합니다.

처음에는 약간 혼란 스러울 수 있지만, 일단 메인 및 크로스 축이 방향에 어떻게 반응하는지 알면 클릭합니다. 패턴을 발견하기 시작하면 레이아웃 결정이 더 직관적 인 느낌이 듭니다. 연습 중에 물건을 다시 확인하려면 아래에 빠른 참조 표가 있습니다.

구문 및 일반적인 Flexbox 속성

컨테이너 디스플레이 속성을 블록에서 플렉스로 전환하여 Flexbox를 활성화하십시오. 이렇게하면 브라우저는 행, 버튼, 카드 또는 아이콘과 같은 내부 요소를 Flex 항목으로 처리하기 시작합니다.

.container {
display: flex;
}

거기에서 다른 Flexbox 속성을 사용하여 동작을 제어합니다. 예를 들어, 정당화 컨텐츠는 메인 축을 따라 항목이 어떻게 간격을 두는 지 결정합니다 (기본적으로 플렉스 방향 : 행) . Flex-Start를 사용하여 왼쪽에 항목을 정렬하고 Flex-End를 오른쪽으로 밀고, 중앙에 중앙을 중심으로하거나, 우주와 공간을 고르게 퍼뜨립니다.

기본적으로 Flexbox는 한 줄의 모든 항목을 맞추려고합니다. 너무 많으면 Flex-Shrink 설정에 따라 적합하게 수축 할 수 있으며 충분히 축소 할 수 없으면 컨테이너가 넘쳐날 수 있습니다. 이를 방지하려면 Flex-Wrap을 켜면 항목이 하나로 크램링하는 대신 새 라인으로 이동하십시오.

이 두 속성이 레이아웃 문제를 해결할 수있는 많은 사용 사례를 이미 생각할 수 있습니다. 그러나 더 많은 것이 있으며, 각각은 크기, 순서, 정렬 및 간격을 구체적으로 제어 할 수 있습니다.

이것이 실제로 장난스럽고 실습적인 방식으로 어떻게 작동하는지 궁금하다면 Flexbox Froggy를 사용해보십시오. 연못 주위에 개구리를 움직이기 위해 실제 Flexbox 코드를 적용하는 재미있는 작은 게임입니다. 그 과정에서, 당신은 추측을 멈추고 각 부동산이하는 일을 정확하게 인식하기 시작합니다.

Flexbox를 사용하는 이유

지금까지 Flexbox가 레이아웃이 공간에 반응하는 방식을 어떻게 변화시키는 지 보았습니다. 그러나 실제 가치는 그 변화로 인해 더 쉽게 할 수 있습니다. Flexbox는 완고한 레이아웃 문제를 간단하고 재사용 가능한 패턴으로 바꿉니다.

• 단순화 된 정렬 : 마진 조정 또는 도우미 클래스에 의존하지 않고 정당화 및 정렬 항목 센터 또는 우주 항목과 같은 속성.
• 기본적으로 반응 : 항목은 공간에 따라 자연스럽게 성장, 수축 또는 포장됩니다. 이로 인해 중단 점을 추가하지 않고 적응하는 더 깨끗한 레이아웃이 발생합니다.
• 자동 간격 및 사이징 : 요소가 Flex-Grow, Flex-Shrink 및 Flex Basis와 같은 특성과 공간을 공간 공유하는 방법을 제어하여 고정 대신 레이아웃 유체를 만듭니다.
• HTML을 변경하지 않고 재정렬 : HTML을 건드리지 않고도 요소의 시각적 순서를 변경할 수 있습니다. 구조는 깨끗하게 유지되며 레이아웃은 다른 화면에 맞게 조정됩니다.
• 레이아웃 해킹이 적습니다 : 더 이상 플로트, 클리어 픽스 또는 높이 일치 스크립트가 필요하지 않습니다. Flexbox는 현대적이고 안정적인 옵션으로 대체합니다.

또한 모든 주요 브라우저에서 지원되기 때문에 Flexbox는 효율적일뿐만 아니라 신뢰할 수 있습니다. 이것은 실제 프로젝트를위한 현대적이고 안정적인 선택입니다.

Flexbox가 종종 그리드보다 나은 이유

그리드는 Flexbox와 같은 또 다른 인기있는 레이아웃 시스템입니다. 그러나 두 가지 모두 다른 사용 사례를 위해 구축되었습니다.

예를 들어 그리드는 행과 열을 모두 제어 해야하는 2 차원 레이아웃을 위해 설계되었습니다. 제품 쇼케이스, 이미지 갤러리 및 잡지 스타일 편집 레이아웃은 그리드 예제이며, 두 축에서 밀접하게 정렬 된 구조에 의존하기 때문입니다.

그리드를 정의하는 것으로 시작합니다 : 얼마나 많은 행과 열이 있는지, 그리고 각각의 넓거나 키가 얼마나 있어야하는지. 그런 다음 각 항목을 해당 구조에 배치합니다.

이것은 그리드 레이아웃입니다. 항목은 고정 간격 및 비율로 행과 열의 축과 열에 정렬됩니다.

그러나 모든 레이아웃이 그 수준의 계획이 필요한 것은 아닙니다.

대부분의 경우 UI 섹션은 단일 방향으로 흐릅니다. 카드 행, 아이콘 플러스 텍스트 블록 및 내비게이션 링크는 2 개가 아닌 한 축을 따릅니다. 바로 Flexbox가 맞는 곳입니다.

Flexbox 레이아웃에서 카드는 한 방향 (행 또는 열)으로 정렬 된 다음 컨테이너 규칙에 따라 포장 및 간격을두고 있습니다.

전체 레이아웃을 미리 매핑 할 필요가 없습니다. 단순히 컨테이너에게 항목이 단일 축을 따라 어떻게 행동 해야하는지 알리고 Flexbox는 처리합니다.

따라서 강성 그리드에 진정으로 의존하는 것을 디자인하지 않으면 Flexbox는 종종 더 빠르고 단순하며 유연한 선택이됩니다.

Divi 5의 Flexbox

Flexbox에 대해 지금까지 배운 모든 것은 훌륭하지만 모든 레이아웃 조정에 대한 맞춤형 CSS를 작성하는 것은 특히 Divi와 같은 시각적 빌더를 사용하여 사이트를 구축 한 경우 원하는 것이 아닙니다.

그렇기 때문에 Divi 5에는 이제 내장 Flexbox 컨트롤이 포함되어 있습니다. 더 이상 탭을 전환하거나 수동으로 CSS를 추가 할 필요가 없습니다. 이 모든 것, 심지어 고급 레이아웃 동작은 이제 코딩과 압도적 인 백엔드를 뺀 시각적 빌더에 내장되어 있습니다.

YouTube 채널을 구독하십시오

간단히 말해서 구문이나 속성 이름을 기억할 필요가 없으며 인터페이스에서 원하는 것을 선택하십시오. 모든 섹션, 행 또는 열을 클릭하고 디자인 탭으로 이동하고 레이아웃> 레이아웃 스타일 아래에서 Flex를 사용하십시오.

이것은 새로운 레이아웃 컨트롤 세트를 열어줍니다. 이들은 일반적으로 CSS로 작성하는 핵심 Flexbox 속성이지만 이제는 클릭 가능한 옵션으로 작성합니다. 변경 사항을 실시간으로 테스트하고 콘텐츠가 어떻게 반응하는지 확인할 수 있습니다.

따라서 Flexbox 코드의 한 줄을 한 번도 쓰지 않더라도 아무것도 놓치지 않을 것입니다. Divi 5는 동일한 수준의 제어로 시각적으로 동일한 레이아웃 컨트롤을 제공하지만 훨씬 쉽습니다.

Divi 5의 Flexbox 시스템에 대한 모든 것을 배우십시오

새로운 행 구조

다른 웹 빌더도 가지고있을 때 왜 divi? 많은 웹 빌더는 Flexbox를 레이아웃 옵션으로 제공하지만 Divi 5는 다르게 접근합니다. 이것은 기존 시스템 위에있는 기능이 아닙니다. 이제는 빌더가 작동하는 방식의 핵심입니다.

전체 레이아웃 엔진은 기초의 Flexbox와 함께 처음부터 재건되었습니다. 결과적으로, 레이아웃 동작은 의도적으로 설계된 레이아웃 로직을 따를 것이기 때문에 더 일관되고 예측 가능합니다.

예를 들어, Divi 5에 새 섹션이나 행을 추가하면 즉시 다른 것을 알 수 있습니다. 새로운 구조. 각각은 기본적으로 Flexbox에서 실행되므로 정렬, 간격 및 응답 성은 처음부터 더 지능적으로 처리됩니다.

추가 한 새로운 디자인 요소에 대한 Flex를 켜지 않아도됩니다. 그리고 구형 레이아웃을 편집하면서 정렬 및 간격 도구를 즉시 관리하기가 더 쉬워집니다.

변경 열 구조를 사용하여 열 내부에 열이 어떻게 배열되는지 변경할 수도 있습니다.

새 열 구조를 선택할 수있는 패널이 열립니다. Flexbox가 간격 및 정렬을 자동으로 조정하면 레이아웃이 즉시 업데이트됩니다.

몇 가지 다른 행 유형을 추가하고 화면 크기 조정해보십시오. 모든 것이 어떻게 변화하지 않고 어떻게 변화하고 적응하는지 알 수 있습니다. 이것이 바로 빌더로 구운 Flexbox의 강점으로 Divi 5를보다 신뢰할 수 있고 현대적인 옵션으로 만듭니다.

Divi 5에서 Flexbox의 작동 방식

시작하는 경우 Divi 5에서 Flexbox를 사용할 때 자신감을 느끼는 데 도움이되는 빠른 연습이 있습니다.

레이아웃 컨트롤

섹션, 행 또는 열을 플렉스 레이아웃으로 전환하면 디자인> 레이아웃 설정 에 새로운 레이아웃 컨트롤 세트가 나타납니다. 이들은 일반적인 옵션과 함께 시각적 Flexbox 컨트롤을 제공합니다.

• (1) 레이아웃 스타일 : Flex를 활성화하는 곳입니다. 일단 설정되면 방향, 정렬 및 간격과 같은 다른 플렉스 특정 옵션이 보이게됩니다.
• (2) 수평 간격 : 왼쪽에서 오른쪽으로 항목 사이에 공간이 추가됩니다.
• (3) 수직 간격 : 열 레이아웃을 사용할 때 쌓인 요소 사이의 공간을 설정합니다.
• (4) 레이아웃 방향 : 흐름, 행, 열 또는 반전 방향을 변경하여 항목이 나란히 또는 위쪽으로 정렬 할 수 있습니다.
• (5) 내용을 정당화 : 주 축을 따라 항목을 정렬합니다. 당신은 그들을 중심으로하거나 한쪽으로 밀거나 퍼 뜨릴 수 있습니다.
• (6) 항목 정렬 : 교차 축을 따라 항목을 정렬합니다. 이는 수평 행 내에 세로로 항목을 정리할 때 도움이됩니다.
• (7) 레이아웃 랩핑 : 공간이 다가 오면 항목이 다음 줄로 이동할 수 있습니다. 깨지지 않고 화면 크기에 반응하는 레이아웃을 구축하는 동안 도움이됩니다.

로고가있는 브랜드 바가 있고 더 커지기를 원한다고 가정 해 봅시다. 플렉스 방향이 행으로 설정되고 레이아웃 포장이 켜지면 공간이 없을 때 자동으로 두 줄로 흘러 들어갑니다.

미디어 쿼리 나 수동 해결 방법이 없으면 두 행으로 요소를 정렬하는 것이 쉬운 일입니다.

열 제어 및 사이징

Flex 지원 행에 안에 들어가면 각 열에는 열 클래스 라는 디자인> 사이징 아래에 새로운 설정이 있습니다. 이것은 콘텐츠와 주변 환경에 따라 열이 얼마나 많은 공간을 차지하는지를 결정합니다.

적합하게 수축 사이에서 선택할 수 있습니다 (열을 컨텐츠만큼 넓게 만듭니다) 또는 채우기 위해 성장할 수 있습니다 (열을 확장하여 추가 공간을 차지합니다).

예를 들어, 텍스트 열이 더 두드러지고 콘텐츠를 포옹하는 카드 요소가 있으면 카드를 수축하도록 설정하고 텍스트가 자라도록 설정할 수 있습니다.

주문 제어

강력하지만 종종 간과되는 또 다른 도구는 컨텐츠 탭의 순서 설정입니다. 이렇게하면 와이어 프레임 또는 레이어 뷰에서 레이아웃 구조를 변경하지 않고도 열과 모듈을 시각적으로 재정렬 할 수 있습니다.

특정 모듈이 모바일에서 먼저 표시되지만 데스크탑에서 두 번째로 표시되기를 원합니다. 각 중단 점에서 다른 주문 값을 할당 할 수 있습니다.

Flexbox의 실제 사용 사례

Divi 5로 단순화 된 몇 가지 Flexbox 사용 사례를 살펴 보겠습니다.

1. 수직으로 Flex와 정렬됩니다

오랫동안 수직 정렬은 웹 디자인의 가장 성가신 레이아웃 문제 중 하나였습니다. 당신은 트릭, 절대 포지셔닝, 수동 여백 등을 패딩 할 것입니다. 데스크탑에서는 잘 보이지는 않았지만 작은 화면에서 깨졌습니다.

Divi 5를 사용하면 그 두통이 사라졌습니다. 이제 섹션 내부의 컨텐츠를 수직으로 중앙으로 중앙으로 중앙으로 설정하려면 정렬 항목을 중앙으로 설정합니다.

그게 다야. 레이아웃은 중단 점에서 자동으로 조정되며 콘텐츠는 항상 달콤한 지점에 있습니다. CSS 체조를 취했던 것은 이제 건축업자 내부에서 몇 번의 클릭으로 불만입니다.

2. 카드 높이를 자동으로 평등하게합니다

당신은 아마도이 문제에 빠질 것입니다. Blurb 섹션과 같은 한 줄의 카드를 만들고 한 항목이 다른 항목보다 더 많은 텍스트를 가질 때까지 모든 것이 잘 보입니다. 갑자기 레이아웃이 고르지 않습니다. 일부 기둥은 키가 커지고 일부는 짧고 다른 기둥은 짧게 유지되며 디자인은 균형을 잃습니다.

수동 정리는 더 이상 필요하지 않습니다. 행이나 섹션을 플렉스로 전환하면 Divi는 각 열이 Flex 항목으로 취급되는 기본 설정을 적용합니다. 이렇게하면 내부의 내용에 관계없이 동일한 행 내에서 서로의 높이를 자동으로 늘립니다.

또한 반응이 유지됩니다. 작은 화면에서는 열이 추가 조정없이 새 행으로 감싸고 동일한 높이 동작이 계속 적용됩니다.

3. 중단 점에서 버튼을 자동으로 랩합니다

다양한 화면 크기에 걸쳐 단추를 깔끔하게 유지하고 읽을 수있게하는 것은 고통 일 수 있습니다. 일반적으로 새 행을 추가하거나 각 중단 점에 대한 레이아웃을 수동으로 조정하게됩니다. 그러나 Divi 5의 경우 더 이상 필요하지 않습니다.

플렉스 레이아웃을 켜고 랩톱 뷰에서 레이아웃 포장을 활성화하십시오. 그게 다야. 버튼은 레이아웃을 깨지 않고 작은 화면에서 자동으로 여러 줄로 감싸게됩니다.

버튼은 더 큰 화면에서 간격과 정렬을 유지하고 태블릿과 전화기에 자연스럽게 쌓아 둡니다. 정당화 컨텐츠를 사용하여 정렬을 미세 조정하고 갭을 사용하여 간격을 제어 할 수 있으므로 모든 크기가 깨끗하고 의도적으로 보입니다.

Divi + Flexbox는 의미가 있습니다

Flexbox가 어떻게 작동하는지, Divi 5가 시각적으로 만드는 방법, 그리고 일반적인 레이아웃 두통이 몇 시간 대신 몇 초가 걸리는지 보았습니다. Divi 5는 단지 Flexbox를 지원하지 않고 주변에 구축되었습니다. 모든 섹션, 행 및 열은 사용자 정의 CS없이 기대할 수 있듯이 행동 할 준비가되었습니다.

Divi 5로 디자인하는 경우 Flexbox는 옵션이 아닙니다. 더 똑똑한 기본값입니다. 깨끗한 레이아웃, 더 적은 해결 방법 및 반응 제어는 빌더로 바로 구워졌습니다. 그것이 바로 변화이며, 그것은 웹 디자인의 미래를 준비하는 것입니다.