Divi 5의 모든 단일 Flexbox 설정 이해

Flexbox와 Divi 5는 Divi 사용자가 놀라운 반응 형 레이아웃을 만들 수있는 강력한 듀오입니다. 이 게시물에서는 모든 Flexbox 설정을 이해하고 사용하여 유연하고 반응이 좋은 레이아웃을 쉽게 만들 수있는 최고의 안내서를 제공합니다.

Flexbox는 Divi 5의 개조 된 비주얼 빌더의 핵심이므로 사용자는 타의 추종을 불허하는 멋진 디자인을 구축 할 수 있습니다. Divi 5의 Flexbox 레이아웃 시스템은 컨텐츠 정렬에서 동적 그리드 구축에 이르기까지 복잡한 레이아웃을 산들 바람으로 만듭니다.

다이빙합시다.

Flexbox 란 무엇입니까?

Flexbox는 크기가 동적 인 경우에도 컨테이너 내에 요소를 쉽게 정렬, 정렬 및 배포 할 수 있도록 설계된 CSS 레이아웃 모델입니다. 플로트 또는 포지셔닝에 의존하는 기존 CSS 레이아웃과 달리 Flexbox는 유연하고 반응이 좋은 디자인을 구축하는 직관적 인 방법을 제공하므로 현대적인 웹 개발의 초석입니다.

YouTube 채널을 구독하십시오

Flexbox의 주요 개념

Flexbox는 몇 가지 기본 개념을 중심으로 작동합니다.

• 플렉스 컨테이너 : 디스플레이가있는 상위 요소 : 플렉스 또는 인라인-플렉스 적용, 플렉스 컨텐츠 설정. 이 컨테이너는 아이들이 레이아웃 내에서 어떻게 행동하는지 지시합니다.
• 플렉스 아이템 : 컨테이너의 플렉스 특성에 따라 배열되고 정렬되는 플렉스 컨테이너의 직접 어린이.
• 주요 축 및 교차 축 : Flexbox는 메인 축 (행으로 수평 또는 열로 수직) 및 수직 교차 축을 따라 작동합니다. 주요 축의 방향은 왼쪽에서 오른쪽에서 왼쪽에서 오른쪽에서 오른쪽에서 오른쪽에서 오른쪽으로 다른 모드에 적응하여 글로벌 디자인에 유연성을 제공 할 수 있습니다.

Divi 5의 Flexbox : 새로운 시대

Divi 5의 Flexbox 레이아웃 시스템은 시각적 빌더에 내장되어있어 Divi 사용자는 직관적 인 컨트롤로 반응 형 레이아웃을 만들 수 있습니다. 이러한 설정은 주로 섹션, 행, 열 및 모듈 그룹에 적용되므로 CSS를 쓰지 않고 시각적으로 레이아웃 동작을 조작 할 수 있습니다. Flexbox를 사용하면 요소를 쉽게 정렬하고, 재정렬하고, 쉽게 변환 할 수 있습니다.

Divi 5에서 Flexbox에 액세스

Divi 5에서 Flexbox에 액세스하는 것은 간단하고 직관적입니다. 비주얼 빌더를 열고 새 행을 추가 한 다음 디자인 탭으로 이동하십시오. 레이아웃 드롭 다운 아래에 Flexbox 설정이 있습니다.

이 설정은 Flex 컨테이너 레벨 (섹션, 행 등)에 적용되어 Flex 항목의 동작을 제어합니다. Divi의 인터페이스는 사용자 친화적 인 옵션을 통해 설정을 표시하므로 모든 기술 수준의 사용자가 쉽게 Flexbox를 쉽게 사용할 수 있습니다.

각 설정을 통해 걸어서 작동 방식과 레이아웃을 구축하는 방법을 더 잘 이해할 수 있습니다.

Divi 5의 Flexbox 설정의 상세한 분석

아래는 Divi 5의 모든 Flexbox 관련 설정에 대한 안내서입니다. 각 설정에는 목적, 사용 가능한 옵션 및 실용적인 사용 사례가 포함되어있어 효과적으로 적용 할 수 있습니다.

레이아웃 스타일

Flex 는 레이아웃 스타일 드롭 다운 메뉴의 기본 옵션입니다. 컨테이너를 굽히도록 설정하면 플렉스 컨테이너가됩니다. 그런 다음 CSS Flexbox 속성을 사용하여 직접 자식 요소 (Flex 항목)를 유연하게 정렬 할 수 있습니다.

반면에, 블록은 과거에 Divi가 처리 한 레이아웃을 전통적인 방식입니다. 블록 컨테이너 내의 요소는 블록 레벨 요소로 처리됩니다. 이것은 그들이 일반적으로 수직으로 쌓아서 부모 컨테이너의 가용 폭을 차지한다는 것을 의미합니다.

수평 및 수직 간격

Divi 5의 Flexbox 설정에서 수평 및 수직 갭 제어는 CSS 갭 속성으로 기능합니다. 그들은 컨테이너 내 어린이 요소 사이에 일관된 간격을 추가하는 효율적인 방법을 제공합니다.

수평 갭은 수평으로 배열 될 때 플렉스 품목 사이의 공간을 정의합니다. 아래의 예에서, 수평 간격은 각 열 사이의 빈 공간을 생성하지만 플렉스 컨테이너의 외부 가장자리에는 있지 않습니다. 기본적으로 %는 선택되지만 여기에서 Divi 5의 CSS 속성을 사용할 수 있습니다.

수직 간격은 항목 행 사이의 공간을 정의합니다. 레이아웃 포장을 활성화 할 때 (나중에 자세히 설명) 이것은 매우 중요합니다. 레이아웃 방향이 열 또는 열 역전 으로 설정 될 때도 적용됩니다.

레이아웃 방향

Divi 5의 레이아웃 방향 옵션 (CSS의 플렉스 방향 속성)은 가장 기본적인 제어 중 하나입니다. 컨테이너 내의 하위 요소가 배열 될 기본 축을 결정합니다.

콘텐츠의 흐름을 설정하는 것으로 생각하십시오. 행, 행 반전, 열 및 열 리버스의 네 가지 주요 선택이 있습니다. 행이 가장 일반적인 설정입니다. 플렉스 아이템은 왼쪽에서 오른쪽으로 수평으로 배열됩니다. 기존의 수평 열 레이아웃, 내비게이션 메뉴, 나란히 요소 또는 페이지를 가로 질러 흘러 가기를 원하는 시간을 만드는 데 이상적입니다.

행 반전을 사용하면 품목은 여전히 ​​수평으로 배열되지만 반대 방향으로 배열됩니다.

열을 선택하면 항목은 위에서 아래로 수직으로 배열됩니다. 이는 단일 열 내에 모듈을 쌓거나, 컨텐츠의 수직 목록을 작성하거나, 요소가 아래쪽으로 흐를 필요가있는 레이아웃을 구축하는 좋은 옵션입니다.

열 리버스는 컬럼과 동일하게 작동하여 컨테이너 내에 품목을 수직으로 쌓지만 반대로 쌓습니다.

내용을 정당화하십시오

Divi 5의 정당화 컨텐츠 옵션 (CSS의 정당화 컨텐츠 속성)은 Flex 컨테이너의 주요 축을 따라 Flex 항목의 정렬을 제어합니다.

옵션에는 시작 (CSS의 Flex-Start)이 포함되며, 이는 항목을 기본 축의 시작 부분에 맞게 정렬합니다. 센터는 항목을 메인 액세스의 중간에 정렬합니다.레이아웃 방향> 행을사용하면 항목이 수평으로 중심됩니다.레이아웃 방향> 열을사용하는 경우 항목이 수직으로 중심됩니다.엔드는항목을 끝까지 정렬합니다 (행 또는 열 선택에 따라 오른쪽 또는 하단).

주 축을 따라 품목을 골고루 분배하는공간을사용하십시오. 첫 번째 항목은 시작과 일치하고 마지막은 컨테이너 끝과 정렬됩니다. 주위의 공간은 각 항목 주위에 동일한 공간을 사용하여 메인 축을 따라 품목을 고르게 배포합니다. 마지막으로, 공간은 두 개의 인접한 품목과 첫 번째 항목 이전과 이후의 공간 사이의 간격이 동일합니다.

항목을 정렬합니다

Divi 5의 Flexbox 설정에서정렬 항목옵션 (Align-CSS 속성)은 Flex 컨테이너의 교차 축을 따라 Flex 항목이 정렬되는 방법을 제어합니다. 이 옵션은 메인 축을 따라 항목을 정렬하는 정당화 컨텐츠와 다릅니다.

레이아웃 방향을행 또는행 역전으로 설정하면 교차 축이 수직이됩니다. 이를 통해항목을 정렬하여행 내에서 항목의 수직 정렬을 제어 할 수 있습니다.레이아웃 방향을열 또는열 역전으로 설정하면 교차 축이 수평입니다. 따라서 정렬 항목은 열 내 항목의 수평 정렬을 제어합니다.

시작, 센터, 엔드 및 스트레치에 항목을 정렬하는 시작을 포함한 4 가지 주요 옵션이 있습니다. 컨테이너의 교차 축을 따라 사용 가능한 전체 공간을 채우도록 항목을 늘립니다. 특정 높이 또는 너비가 지정된 항목은 스트레치를 무시합니다.

레이아웃 포장

Divi 5의 Flexbox 설정에서 레이아웃 랩핑 (Flex-Wrap CSS 속성)은 공간이 꽉 닿을 때 Flex 컨테이너 내부의 Flex 품목이 공간이 부족하여 다음 줄로 감싸는 경우 어떻게되는지 결정합니다. Divi 5에는 랩, 랩 및 랩 리버스를 포함하여 세 가지 옵션이 있습니다.

랩은 기본 설정이 아니며 , 플렉스 컨테이너는 사용 가능한 공간에 관계없이 모든 플렉스 항목을 단일 라인 또는 열에 장착하도록 지시합니다. 품목이 너무 넓어지면 컨테이너가 넘치거나 (경계를 넘어서) 축소되거나 적합하게 수축합니다. 랩을 사용하면 요소가 행의 할당 된 공간을 초과하면 요소가 새 선이나 열로 감을 수 있습니다. 랩 랩 리버스는 랩과 유사하게 작동하지만 다음 줄로 감을 때 반대 방향으로 그렇게합니다.

모듈 수준에서 플렉스 컨트롤

Divi 5는 섹션, 행 및 열 레벨에서 Flexbox 컨트롤을 제어하는 ​​것 외에도 개별 Divi 모듈을 정확하게 제어 할 수 있습니다. 예를 들어, 그룹 모듈을 사용할 때는 간격 (GAP), 레이아웃 방향 및 Divi 5의 다른 Flexbox 설정을 조정할 수 있습니다.

Flexbox의 장점

Divi 5의 Flexbox는 단순한 기술 업그레이드가 아닙니다. 현대적이고 반응이 좋은 웹 사이트를보다 쉽고 효율적으로 구축하는 더 나은 방법을 제공합니다. Flexbox를 Visual Builder에 통합함으로써 Divi 5는 모든 기술 수준의 사용자가 코드를 작성하지 않고 CSS의 힘을 활용할 수 있도록합니다. Flexbox가 Divi 4의 영향력있는 업그레이드라는 몇 가지 이유는 다음과 같습니다.

직관적 인 노 코드 레이아웃 제어

Divi 5는 Flexbox 설정을 시각적 빌더에 직접 통합하여 간단한 옵션으로 정렬, 간격 및 주문을 조정할 수 있습니다. 동일한 열 높이를 만들거나 컨텐츠를 세로 중심으로하든 Flexbox는 복잡한 레이아웃을 쉽게 만듭니다.

더 나은 반응 형 디자인

Divi 5의 Flexbox 레이아웃 시스템은 데스크탑, 태블릿 및 스마트 폰을위한 사용자 정의 가능한 레이아웃 컨트롤 덕분에 반응 형 디자인을 산들 바람으로 만듭니다. Divi의 Change 열 구조 옵션 옵션을 사용하면 태블릿과 스마트 폰의 열 수를 변경하면서 레이아웃의 열 구조를 데스크톱에 그대로 두는 것이 가능합니다.

Flexbox + 중첩 행

Divi 5의 중첩 행과 Flexbox를 결합하면 복잡한 다단계 레이아웃을 쉽게 구축 할 수 있습니다. 예를 들어, 자체 행이 포함 된 열이있는 행을 생성하여 그리드 또는 계층 컨텐츠 섹션과 같은 정교한 디자인을 가능하게합니다.

Flexbox + 모듈 그룹

Divi 5의 모듈 그룹은 Flex 컨테이너 역할을하여 그룹 모듈을 응집력있는 장치로 스타일링하고 위치시킬 수 있습니다. 따라서 일관된 간격 및 정렬을 유지하면서 컨텐츠 변경에 자동으로 조정하는 기능 상자 나 평가 카드와 같은 동적 섹션을 간단하게 만들 수 있습니다.

성능 및 단순성 향상

Divi 4의 전문 및 풀폭 섹션을 통합 Flexbox 기반 시스템으로 대체함으로써 Divi 5는 설계 프로세스를 간소화하여 복잡성을 줄이고 성능을 향상시킵니다. 이는 특히 크거나 콘텐츠가 많은 웹 사이트에 대해 더 빠른로드 시간과 더 부드러운 편집 경험을 의미합니다.

빠른 시작을 위해 Flexbox 템플릿을 사전 제작했습니다

Divi 5는 Flexbox를 활용하여 동일한 열, 오프셋 열, 멀티 로우 그리드 및 멀티 컬럼 그리드와 같은 사전 정의 된 유연한 레이아웃을 제공하는 새로운 행 템플릿을 소개합니다. 이 템플릿은 창의성에 영감을 주어 Flexbox 설정을 통해 완전히 사용자 정의 가능한 구조로 디자인을 시작할 수 있습니다.

미래 방지 설계 워크 플로

Divi 5가 공개 알파 단계에서 계속 발전함에 따라 Flexbox 레이아웃 시스템은 Divi 사용자를 최신 웹 디자인의 최전선에서 배치합니다. Flexbox를 지금 마스터함으로써 업계 표준에 맞는 기술을 갖추고있어 웹 사이트가 향후 업데이트에 적응할 수 있도록합니다.

Divi 5의 Flexbox를 사용하여 창의적 잠재력을 발휘하십시오

Divi 5의 Flexbox는 사용자가 반응 형 동적 레이아웃을 구축하는 방식을 변경합니다. Divi 5를 사용하면 강력한 CSS Flexbox 속성을 Visual Builder에 원활하게 통합하여 코드를 작성하지 않고도 멋진 현대 웹 사이트를 만들 수 있습니다. 직관적 인 정렬 및 간격 컨트롤에서 중첩 행 및 모듈 그룹과 같은 고급 기능에 이르기까지 Flexbox 레이아웃 시스템은 복잡한 디자인을 단순화하면서 모든 장치에서 훌륭하게 보이는 완벽하게 반응 형 레이아웃을 보장합니다.