Divi 5의 Flexbox 레이아웃 시스템으로 전환 할 때 피하기위한 5 가지 함정

Divi 5는 모든 New Flexbox 기반 레이아웃 시스템을 배송했습니다. Divi 4의 오래된 블록 레이아웃 엔진을 대체하고 Visual Builder에서 강력한 새로운 컨트롤을 잠금 해제합니다. 모든 새 행은 이제 기본적으로 레이아웃을 플렉스합니다. CSS Flexbox를 이미 사용하지 않았다면 Flex가 다르게 작동하기 때문에이 변경 사항은 새로운 디자인 사고 방식을 요구합니다. 습관을 조정하지 않으면 갇히게됩니다.

이 업데이트는 포장, 방향, 간격, 주문 및 정렬에 대한 시각적 컨트롤을 제공합니다. 또한 디스플레이 설정을 최소화하여 복잡한 행 구조를 구축하기 위해 사전 구성된 행 단축키가 제공됩니다. Flex가 이제 이러한 모든 사용 사례를 다루기 때문에 전문 분야 및 전폭 섹션과 같은 일부 블록 기반 기능은 더 이상 사용되지 않습니다.

이 게시물은 Divi 5의 정신 모델을 블록에서 Flex로 전환 할 때 발생할 5 가지 가장 큰 함정으로 들어갑니다.

함정 #1 : 플렉스를 블록 사고 방식으로 강제합니다

→ Flex는 새로운 컨트롤뿐만 아니라 새로운 정신 모델이 필요합니다.

그들이 매우 실제 한계를 겪고 있다는 것을 알지 않는 한 변화를 좋아하는 사람은 없습니다. 많은 사람들에게 오래된 레이아웃 시스템은 그들이 알고 편안한 것입니다. 그러나 그 제한이있었습니다. CSS에 대해 충분히 알고있는 사람들은 기존 시스템이 Flexbox가 치료하도록 설계된 것들이 빠졌다는 것을 알고있었습니다. 첫 번째 함정을 피하려면 Flexbox가 추가 옵션이있는 블록 레이아웃이 아니라는 것을 이해해야합니다.

Divi 4에서는 모듈이 기본적으로 수직으로 쌓여있었습니다. 모든 요소는 이전의 요소 아래에있었습니다. 열에 따라 물건을 쌓을 수 있지만 그 시점에서는 섹션 내부의 여러 행 + 열에서 작업하여 레이아웃을 작성합니다. 그것은 많은 사람들에게 예측 가능하고 편안했지만, 두 개의 버튼을 나란히 및 기타 디자인 문제로 가질 수 없다는 실망스러운 현실로 이어졌습니다.

Divi 5는 새로운 컨테이너 (예 : 섹션, 행, 열 및 그룹)가 기본적으로 "Flex"로 설정되어 있기 때문에 이제 다르게 작동합니다. 아동 요소를 배열하기 위해 컨테이너 수준에서보다 구체적인 옵션을 얻을 수 있습니다. Flexbox는 사용 가능한 공간과 그 내의 내용을 기반으로 요소를 배치하는 유연한 레이아웃을 허용하기 때문에 강력합니다. 다음 함정에서 그것에 대해 더 많이 . 이를 통해 고정 또는 절대 위치에 의존하지 않고 레이아웃이 다양한 화면 크기 및 컨텐츠에 적응할 수 있습니다. Flex와 Block을 비교하는 한 가지 예입니다.

블록 레이아웃 스택 스택 모듈은 블록 축을 따라 수직으로 모듈입니다. Flexbox를 사용하면 주 축으로 행과 열을 선택할 수 있습니다.

UI의 각 설정 및 옵션은 각 컨테이너에 추가 된 실제 CSS 속성과 직접 해당합니다.

함정 #2 : 플렉스 수축 및 성장이 어린이 요소 크기에 어떻게 적합한 지 모른다

→ 수축과 성장 없이는 레이아웃이 예상대로 작동하지 않습니다.

Divi 5의 Flex를 사용하면 어린이 모듈의 너비 또는 높이가 설정 될 수 있습니다. 또한 컨테이너 내부의 방에 따라 축소되거나 (폭 또는 높이) 수축하거나 채울 수 있습니다. 이 예에서 텍스트 모듈은 45% 너비로 설정되므로 두 모듈은 마치 같은 행에있는 것처럼 수평으로 맞습니다. 그러나 홀수의 텍스트 모듈을 추가하면 빈 공간이 있기를 원하지 않습니다. 이 모듈을 Flex 성장하도록 설정할 수 있으며, 사용 가능한 공간이 연속으로 있으면 이러한 모듈이 채워집니다.

Divi는 "Grow to Fill", "Shrink to Fit"과 같은 컨트롤 및 Flex 컨테이너 (Child Element> Design> Sizize> 채우기, 적합 또는 맞춤형 ) 내 어린이 요소의 사용자 정의 설정과 같은 컨트롤을 노출시킵니다.

어린이 요소의 높이와 폭을 설정하면 레이아웃을 차단하는 데 익숙한 느낌이 듭니다. 그러나 Flexbox를 사용하면 설정을 성장하고 수축하면 고정 크기를 응답 형 동작과 결합하여 각 컨테이너의 사용 가능한 공간에 적응할 수 있습니다. 복잡성을 추가하지만 훨씬 더 많은 유연성을 잠금 해제합니다.

적합하고 자라는 수축 (Flex-Basis 외에도)은 반응 형 레이아웃을 만드는 데 매우 편리합니다. 블록 레이아웃이 자주 반응하려면 각 중단 점에서 여러 중단 점과 너비/높이를 설정해야합니다. Flexbox는 다양한 중단 점에서 고유 한 설정의 혜택을 누릴 수 있지만 이름에서 알 수 있듯이 매우 유연합니다 . 타이포그래피에 clamp ()를 사용할 때 특히 그렇습니다. 다른 상대 CSS 단위와 함께 두 가지를 함께 사용하면 끊임없이 중단 점이 필요합니다.

Flexbox로 제작 된 다른 예를 살펴 보겠습니다.

열 컨테이너 (부모)는 다음과 같은 설정으로 유연하게 설정되어 있습니다.

• 수평 및 수직 간격 : 30px (Calc 또는 Clamp를 사용할 수 있습니다.
• 레이아웃 방향 : 행 반전 (The Stall #4 에서이 결정에 대한 설명)
• 내용을 정당화하십시오 : 센터
• 항목 정렬 : 센터
• Flex Wrap : 랩 리버스 (The Stall #4 에서이 결정에 대한 설명)

그런 다음 칼럼 내에 세 개의 어린이 요소를 배치했습니다. 제목 모듈, 분배기 모듈 및 텍스트 모듈. 각각의 관련 설정은 다음과 같습니다.

• 제목 모듈
  • 텍스트 크기 : 클램프 (2REM, 1.5REM + 2VW, 3REM)
  • 너비 : 자동
  • 플렉스 크기 : 적합하게 수축
• 분배기 모듈
  • 너비 : 자동
  • 플렉스 크기 : 적합하고 채우기 위해 성장할 수 있도록 수축
• 텍스트 모듈
  • 텍스트 크기 : 클램프 (0.9375REM, 0.75REM + 0.4VW, 1REM)
  • 너비 : 자동
  • 플렉스 크기 : 적합하게 수축

행 플렉스 방향으로 아동 요소는 공간이있을 때마다 수평으로 일치합니다. 텍스트 모듈이 가장 넓기 때문에 자체 행을 채 웁니다. 그런 다음 분배기 모듈은 자동 전형이 있고 Flex-Grow 및 Flex-Shrink가 활성화되어 있기 때문에 성장하거나 줄어 듭니다. 헤더 모듈은 고유 너비 만 사용하고 소형을 유지합니다. 이 설정은 중단 점없이 완전히 반응 형 레이아웃을 산출합니다.

함정 #3 : 여백 습관을 깨뜨리지 않습니다

→ 대신 갭을 사용하십시오 - 그것은 더 똑똑하고 깨끗하며 Flex를 위해 만들어졌습니다.

Divi 4에서는 모듈과 다른 요소 사이의 시각적 간격이 필요했습니다 (하단 마진을 통한 수직 간격, 왼쪽/오른쪽 여백을 통한 수평 간격). 갭이 열 간격에 적용되면 Divi 4는 홈통 설정을 가졌지 만 표준 CSS 값을 사용하지 않았으며 실제로 열의 측면에 마진을 사용하여 간격을 생성했습니다. 이것은 블록 레이아웃이 여전히 작동하는 것과 같은 방식입니다. 그러나 이제는 더 깨끗하고 효과적인 접근 방식이 있습니다.

Divi 5의 Flexbox 시스템은 설계> 레이아웃 > 수평 및 수직 간격 에서 행 및 수직 간격 제어를 도입합니다. 이 맵은 CSS 갭 및 행 갭에 대한지도입니다. 항목이 새 라인으로 감을 때 수직 간격이 각 "Flex Row"에 자동으로 적용됩니다. 수평 간격에 대해서도 마찬가지입니다. 서로 옆에 어린이 요소가있을 때마다 간격이 나타납니다. 이러한 갭 설정은 또한 모든 양의 CSS 장치를 허용하므로 Clamp () 또는 calc ()를 사용하여 반응 형 갭 간격을 만들 수 있습니다.

이는 각 어린이 요소에 마진 값을 적용 할 필요성을 줄입니다. 갭 설정은 플렉스 방향과 컨테이너의 어린이 수를 기반으로 자동으로 적응하여 간격을 자동으로 적용합니다. 여백에는 여전히 자리가 있지만 컨테이너 내부의 간격 요소가 필요합니다.

함정 #4 : 리버스 흐름 및 순서 제어를 중단합니다

→ 시각적 순서와 의미 론적 순서는 일치 할 필요가 없습니다.

기본적으로 Flex 컨테이너의 자식 요소는 소스 순서로 표시됩니다. Flexbox 및 Divi 5는 요소의 HTML 순서를 변경하지 않고 요소의 시각적 흐름을 변경하기 위해 리버스 플렉스 방향 및 순서 컨트롤을 지정할 수있는 기능을 제공합니다.

레이아웃 방향 하에서 반대 방향 으로 전환하면 행 또는 열 방향으로 요소의 순서를 뒤집을 수 있습니다. TiNthfall #2의 레이아웃 예제를 다시 보려면 왜 우리가 이것을 원하는지 알 수 있습니다. 층에서 자식 요소의 순서가 제목, 분배기 및 마지막으로 텍스트 모듈임을 볼 수 있습니다. 의미 적으로, 스택 상단에 제목 (이 경우 H2)을 갖는 것은 스크린 리더에게 적합합니다. 그러나 텍스트 크기가있는 시각적 계층을 사용하고 있기 때문에 제목은 처음이든 마지막이든 시각적으로 충분히 명백합니다.

Row Reverse를 Flex 방향으로 사용하고 랩 리버스로 사용하면 HTML 순서 (접근성에 중요)를 유지하면서도 우리가 구상하는 방식을 설계 할 수 있습니다.

자식 요소의 설정> 내용 탭> 순서를 클릭 할 때 Divi에서 찾은 자식 요소 순서를 사용하여 동일한 것을 달성 할 수 있습니다. 이 요소 만 나타나는 순서를 변경할 수 있습니다. 이 예에서는 동일한 최종 결과를 달성하지만 다른 설정이 있습니다.

함정 #5 : 랩을 설정하는 것을 잊어 버립니다

→ 플렉스는 당신이 말하지 않으면 새로운 행으로 깨지지 않습니다.

우리는 앞서 래핑을 언급했지만 자체 섹션이 필요합니다. 새로운 플렉스 컨테이너 기본값은 랩이 없습니다. 이것은 예상치 못한 결과를 초래할 수 있습니다. 예를 들어, 4 개의 하위 모듈을 각각 50% 너비로 추가하면 두 개의 Flex 행에 표시 될 것으로 예상됩니다. 문제는 단순히 컨테이너를 감싸도록해야한다는 것입니다.

Divi에는 레이아웃 랩핑이라는 토글이 포함되어 있으며, 여기에는 랩, 랩 및 랩 리버스의 세 가지 상태가 있습니다 . 모듈이 임계 값으로 새 라인으로 나누기를 원한다면 랩을 활성화해야합니다. 이것이 Divi가 단일 컨테이너 내부의 멀티 랑 구조를 지원하는 방법입니다 (중첩 또는 여러 행이 지금이 작업을 수행하는 유일한 방법은 아닙니다).

Flexbox를 마스터하는 데 시간을 내십시오

Divi 5의 Flex는 Divi의 이전 블록 전용 레이아웃 시스템보다 강력합니다. 그러나 이해하려면 학습이 필요합니다. Flexbox는 분할 특정 설정이 아니므 로이 CSS 도구가 어떻게 작동하는지에 대한 기본 사항을 아는 것이 중요합니다. Divi는 CSS에 적용 할 수있는 모든 설정을 편집기에서 직접 사용할 수 있으므로 쉽게 구현할 수 있습니다. 그러나 개념은 블록과 매우 다릅니다.

이러한 차이로 인해 대화 형 교육 도구를 사용하여 Flexbox를 이해하는 데 한 시간을 보내는 것이 좋습니다. 사용하기 쉽고 실제로 트릭을 수행하는 것은 FlexBoxFroggy.com입니다. 24 개의 점진적으로 복잡한 도전을 통해 모든 기본 사항을 가르쳐줍니다. 한 시간 동안 종결하는 것보다 훨씬 낫습니다.

오늘 Divi 5와 함께 Flex를 사용하십시오

Divi 5의 Flexbox는 정직합니다. 당신이 원하는 것을 추측하지 않습니다. 그것은 당신에게 결정을 요청합니다. 그러나 일단 결정하면 유연성이 따릅니다. 사용자 정의 CS 나 해킹없이 모든 레이아웃 구조를 책임감 있고 반응 적으로, 심지어 무한 중첩으로 만들 수 있습니다.