Flexbox CSS 속성에 대한 초보자 안내서

좋은 레이아웃은 정렬 및 간격을위한 명확한 모델로 시작합니다. Flexbox는 방향, 정렬, 래핑 및 간격을 예측할 수있는 단일 축을 따라 컨텐츠를 구성하여 해당 모델을 제공합니다.

이 게시물은 이러한 CSS 속성의 기본 사항과 함께 작동하는 방식을 다룹니다. 기초 후, 우리는 Flexbox 레이아웃 시스템을 사용하여 Divi 5에서 동일한 접근법이 어떻게 시각적으로 구현되는지 보여줍니다. 그것에 가자!

CSS Flexbox 란 무엇입니까?

데스크탑을 추월하는 모바일 트래픽으로 인해 웹 디자인이 변경되었습니다. 개발자는 전화, 태블릿 및 데스크탑에서 작동하는 레이아웃이 필요했습니다. 오래된 방법은 종종 실패했습니다.

Flexbox는 이것을 고쳤습니다. CSS Flexbox는 요소를 적응시킵니다. 디스플레이 추가 : 컨테이너에 굴곡하면 직접 어린이가 유연 해집니다. 그들은 공간에 따라 성장, 수축 또는 고정 상태를 유지할 수 있습니다.

Flexbox는 왼쪽에서 오른쪽으로 행 또는 위쪽에서 아래로 열을 직선으로 놓습니다. 당신은 방향을 선택합니다.

컨테이너는 레이아웃을 제어합니다. 스프레드, 중앙 또는 쌓인 등 항목이 정렬 및 공간을 조정하는 방법을 설정합니다. 갭 속성은 여분의 여백이나 패딩이없는 품목 사이에 일관된 공간을 추가합니다. 오래된 기술은 까다로운 마진 수학이 필요했고 자주 파산했습니다.

전통적인 방법은 임의의 간격을 선택합니다 : 여기 10px, 20px, 40px가 다른 곳. 이러한 산란 된 값은 불일치를 유발하고 어떤 간격이 적용되는지 알기가 어렵습니다. 갭 속성 모든 요소에 대해 하나의 일관된 규칙을 사용하여 추측을 제거합니다.

Flexbox 및 그 속성에 대한 빠른 안내서

Flexbox는 두 개의 캠프 : 컨테이너의 속성 및 품목의 속성으로 나뉩니다. 컨테이너 속성은 전체 그룹에 영향을 미치고 항목 속성을 사용하면 개별 요소를 조정할 수 있습니다. 대부분의 레이아웃에는 다음과 같은 소수의 속성 만 필요합니다.

디스플레이 : Flex

디스플레이를 추가하여 요소를 플렉스 컨테이너로 바꾸십시오 : Flex. 직접적인 아이들은 플렉스 아이템이됩니다. 항목은 표준 블록 요소와 같이 쌓는 대신 기본적으로 연속으로 정렬됩니다. 플렉스 항목은 일반 요소와 다른 규칙을 따르므로 간격 두통이 사라집니다. 컨테이너는 이제 어린이 (또는 품목)가 작동하는 방식을 제어하며 일반적인 CSS 놀라움 대신 예측 가능한 결과를 얻습니다.

플렉스 방향

어떤 방향 항목이 흐르는지 선택하십시오. 왼쪽에서 오른쪽으로 행을 사용하십시오.

그리고 품목을 수직으로 쌓는 열.

하나에 리버스를 추가하고 항목은 주문을 완전히 뒤집습니다.

이 선택은 중심 축을 설정하여 다른 속성의 작동 방식에 영향을 미칩니다.

행에서 열로 전환하면 정당화 및 정렬 항목이 어떻게 행동하는지 변경하므로 계획에서 방향이 먼저 발생합니다.

정당화 컨텐츠

이 속성은 중앙 축을 따라 남은 공간을 배포합니다. 항목은 필요한 것을 취한 다음이 속성은 나머지를 처리합니다. Flex-Start를 사용하여 처음에는 모든 것을 무리하고 중앙에서 중앙에서 중앙에서 항목을 클러스터하고 Flex 엔드를 끝내십시오. 동시에 공간 중간은 동일한 간격으로 품목을 분산시키는 데 사용됩니다. 공간 값은 각 항목이 양쪽에 동일한 공간을 제공하는 반면, 공간은 어느 곳에서나 동일한 간격을 생성합니다.

정렬 구조

교차 축의 정렬을 처리합니다. 수평 레이아웃의 경우 이는 수직 정렬을 의미합니다. 수직 레이아웃의 경우 수평 위치를 제어합니다. Flex-Start, Center, Flex-End, Stretch 및 Baseline과 같은 값을 지원합니다 (공간-* 값이 아님). 중앙으로 설정하면 높이에 관계없이 항목이 중간에 정렬됩니다. 기본값은 스트레치입니다. 항목은 컨테이너의 교차 크기를 채우기 위해 스트레치입니다. 컨테이너의 교차 크기가 자동 인 경우, 가장 높은 품목과 같으므로 품목이 높이가 동일하게 나타납니다.

플렉스 포장

아이템이 공간에서 떨어지면 어떻게되는지 결정합니다. 기본 Nowrap은 항목을 수축시켜 한 줄에 모든 것을 유지합니다. 선호하는 크기를 유지하면서 랩과 새 라인에 적합하지 않은 품목으로 전환하십시오. 랩핑 방향도 뒤집을 수 있습니다. 포장은 단일 라인을 여러 줄로 바꾸어 그리드와 유사한 레이아웃을 만듭니다.

갭

마진을 엉망으로 만들지 않고 품목 사이에 공간을 추가합니다. 간격을 설정하십시오 : 20px가되고 모든 품목은 일관된 간격을 갖습니다. 필요한 경우 다른 수평 및 수직 간격을 설정할 수 있습니다. 공간은 가장자리가 아닌 항목 사이에만 나타납니다. 이렇게하면 나중에 레이아웃을 변경할 때 파손되는 여백을 계산합니다.

이 속성은 당신이 그들을 매달린 후에 잘 작동합니다. 까다로운 부분은 각각의 행동을 기억하고 모든 CSS를 입력하는 것입니다. 코드를 작성하고 브라우저를 새로 고치고 옳지 않다는 것을보고 돌아가서 조정하십시오. Divi와 같은 비주얼 빌더는 속성 이름을 입력하는 대신 버튼을 클릭 할 수 있도록하여 이것을 뒤집습니다.

Divi 5는 Flexbox를 시각적으로 만듭니다

우리가 설립 한대로 Flexbox를 배우는 것은 한 가지입니다. 정당화 컨텐츠를 기억하는 것 : Space-Between은 또 다른 것입니다. 디자인보다 속성을 입력하는 데 더 많은 시간을 소비합니다. CSS를 작성하는 대신 Divi Builder의 각 옵션이 정확히 표시되는 버튼과 슬라이더를 사용합니다. Divi 5는 이것을 Flexbox에 가져와 추상 개념을 간단하고 클릭 가능한 컨트롤로 바꿉니다.

더 깊이 다이빙하기 전에 Divi가 무엇인지 간단히 살펴 보겠습니다.

Divi는 무엇입니까?

Divi는 번거 로움없이 멋진 사이트를 원하는 사람들에게 WordPress가 작동하는 웹 사이트 빌더입니다.

페이지 주변의 200 개 이상의 모듈을 드래그하고 앉은 텍스트를 변경할 수 있습니다. 실제 사이트에서 작업하는 동안 색상을 선택하고 즉시 나타나는 것을보십시오. 나중에 누워있는 미리보기가 아닙니다.

테마에는 레스토랑, 사진 작가, 컨설턴트 및 기타 비즈니스 용 2000 개 이상의 레이아웃이 포함되어 있으므로 원하는 것을 찾아서 필요에 맞게 완벽하게 작동 할 때까지 조정할 수 있습니다.

테마 빌더는 사이트의 모든 부분을 제어 할 수 있습니다. 당신은 다른 사람들처럼 보이지 않고 눈에 띄는 헤더를 디자인하고 사람들이 읽고 싶은 블로그 페이지를 만들고 방문객들이 떠나지 않고 집을 붙일만큼 흥미롭게 만들 수 있습니다.

Divi AI는 빠르게 구축하는 데 도움이됩니다

한 번, 테마와 템플릿을 만드는 것은 복사, 이미지 및 디자인 아이디어를 위해 다른 앱을 저글링하는 것을 의미했습니다. Divi ai는 필요한 모든 것을 하나의 통합 인터페이스 (웹 사이트를 구축하는 곳)로 수집합니다.

텍스트가 필요하다고 말하면 글을 씁니다.

사용자 정의 이미지를 요청하면 그 이미지가 생성됩니다. 사진 편집물을 설명하고 변경을 볼 수 있습니다.

또한 코드를 처리하고 요청할 때 새 섹션을 작성합니다.

Divi Quick 사이트는 어디서부터 시작 해야할지 모르면 빈 페이지를 응시하지 못하게합니다. 당신은 우리 팀이 디자인 한 스타터 사이트에서 선택할 수 있습니다.

또한 귀하의 비즈니스에서 빠른 사이트를 분리하고 AI를 사용하여 처음부터 무언가를 구축하도록 할 수 있습니다. 이 AI 구축 사이트에는 설명과 일치하는 실제 헤드 라인, 복사 및 이미지가 제공됩니다.

AI로 모든 것을 생성하거나, unsplash에서 사진을 잡거나, 이미지의 자리 표시자를 떨어 뜨립니다. 글꼴과 색상을 먼저 설정 한 다음 AI가 브랜드 선택을 중심으로 작업하면서 모든 것을 편집 가능한 상태로 유지하십시오.

Divi 5 : 미래 방지 웹 사이트 빌더

Divi 5는 전체 프레임 워크를 처음부터 재건합니다.

Visual Builder는 더 부드럽게 실행되고 페이지가 더 빠르게 렌더링되며 Codebase는 최신 웹 표준을보다 효과적으로 지원할 수 있습니다. 더 깨끗한 마크 업, 더 나은 성능 및 현재와 미래를위한 기초를 얻을 수 있습니다.

인터페이스도 간소화됩니다. 설정은보다 논리적으로 구성된 것처럼 보이며 일상적인 작업은 클릭 수가 적습니다. 간단한 페이지 나 복잡한 레이아웃을 구축하더라도 전반적인 경험은 더 반응이 좋다.

당신은 당신이 아는 것과 동일한 시각적 건물 접근 방식을 얻습니다.

Divi 5의 새로운 것

새로운 아키텍처는 이전에는 불가능한 기능을위한 문을 열어줍니다. 이 18 개 이상의 추가 사항은 웹 사이트를 구축하고 관리하는 방법을 변경합니다.

다음은 얻을 수있는 예입니다.

• Flexbox 레이아웃 시스템 : 정렬, 간격 및 위치를위한 시각적 제어. 요소는 자동으로 새 라인으로 성장, 축소 또는 감염 될 수 있습니다. 코드없이 복잡한 레이아웃을 위해 중첩 행 및 모듈 그룹과 함께 작동합니다.
• 중첩 행 : 무한 둥지로 다른 줄 안에 줄을 넣습니다. 코드 해결 방법없이 복잡한 레이아웃 구조를 구축하십시오.
• 17 WooCommerce 모듈 : 제품 갤러리, 제품 갤러리, 카트, 리뷰, 등급, 재고 통지, 빵 부스러기, 제품 메타, 상향 판매 등을 포함한 완전한 제품 페이지 빌더. 카트 및 체크 아웃 모듈이 곧 출시됩니다.
• 상호 작용 시스템 : 팝업, 토글, 스크롤 애니메이션, 마우스 움직임 효과 및 뷰포트 트리거를 만듭니다. 스크롤 후 사라지는 프로모션 배너와 같은 복잡한 동작을 위해 여러 트리거를 혼합하십시오.
• Responsive Editor : 뷰 모드를 더 빠르고 정확하며 어수선한 편집을 위해보기 모드를 전환하지 않고도 동시에 설정에 대한 반응 형 호버 및 스티커 상태를보기, 편집 및 재설정 할 수 있습니다.>.
• 루프 빌더 : 데이터베이스에서 가져 오는 동적 컨텐츠를 구축합니다. 사용자 정의 포스트 레이아웃, 제품 그리드 및 반복 섹션을 만듭니다. Woocommerce 제품과 함께 작동합니다.
• 옵션 그룹 사전 설정 : 타이포그래피, 테두리, 그림자 및 배경을위한 재사용 가능한 스타일을 만듭니다. 단일 모듈뿐만 아니라 호환 가능한 요소에이를 적용하십시오.
• 디자인 변수 : 색상, 글꼴, 간격, 숫자, 이미지 및 텍스트에 대한 글로벌 값을 설정합니다. 기본 색상을 한 번 변경하면 자동으로 모든 곳에서 업데이트됩니다.
• 고급 CSS 단위 : 시각적 제어를 통해 clamp (), calc (), min () 및 max () 함수를 사용하십시오. 반응 형 타이포그래피 및 간격 계산에는 코드가 필요하지 않습니다.
• 상대 색상 및 HSL : 수학적으로 아름다운 색상 시스템을 만듭니다. 기본 색상이 변경 될 때 자동으로 조화를 유지하는 색상 변형을 구축하십시오.

그리고 더 많은 것입니다! 우리의 개발 팀은 공개 베타 릴리스를 준비 할 때 2 주마다 기능을 계속 추가합니다.

Divi 5의 Flexbox 설정에 대한 빠른 개요

Divi 5의 시각적 접근 방식은 Flexbox 구현의 추측을 제거합니다. 속성 이름을 암기하고 CSS를 입력하는 대신 각 컨트롤이 수행하는 작업을 정확하게 보여주는 버튼과 슬라이더가 나타납니다. 얼마나 쉬운 지 살펴보십시오.

1. 첫 번째 플렉스 행을 설정하십시오

확장 된 템플릿 선택에서 행 구조를 선택하여 시작하십시오. Divi 5는 동일한 열, 멀티 로우 그리드 및 멀티 열 설정을 포함하여 더 많은 레이아웃 옵션을 제공합니다.

Divi 5의 새로운 섹션은 Flexbox로 자동으로 시작합니다. 신선한 행을 추가하면 Flex 속성이 켜져 있습니다. 그러나 이전 디비 버전에서 기존 섹션으로 작업하는 경우 행의 설정 아이콘을 클릭하고 디자인 탭> 레이아웃으로 탐색하고 "블록"을 "플렉스"로 변경하여 기본 블록 레이아웃에서 플렉스로 수동으로 전환해야합니다.

2. 방향, 흐름, 정렬 이해

레이아웃 방향 필드는 항목이 어디에서 끝나는지를 결정합니다. 행은 기본 설정으로 항목이 수평으로 정렬됩니다.

열로 전환하고 항목은 일반 웹 레이아웃처럼 세로로 스택 요소를 스택으로 쌓습니다.

두 옵션 모두 순서를 완전히 뒤집는 리버스 버전과 함께 제공됩니다.

한편, 정당화 콘텐츠는 주요 축을 따라 남은 공간에서 어떤 일이 발생하는지 결정합니다. 행의 경우 시작은 왼쪽을 의미하고 중간 센터는 수평으로 중앙을 수평으로하며 끝이 오른쪽으로 정렬됩니다.

열의 경우 시작은 상단을 의미하며 중간 중심을 중심으로하고 끝을 바닥으로 밀어 넣습니다.

표준 시작, 센터 및 엔드 정렬 외에도 동일한 간격으로 스프레드 항목 사이에 공간이있어 탐색 메뉴 또는 카드 레이아웃에 적합합니다.

주위의 공간은 각 품목에게 양쪽에 동일한 호흡 공간을 제공하므로 일관된 여백을 원할 때 유용합니다. 그리고 공간은 균형 잡힌 시각적 간격에 이상적으로 동일한 간격을 생성합니다.

정렬 항목은 흐름 방향에 수직으로 작동합니다. 행 레이아웃을 선택하면 항목의 수직 위치를 제어합니다.

열 레이아웃을 선택하면 수평 정렬을 처리합니다.

중앙은 모든 것을 가운데에 정렬하고 시작은 시작 가장자리에 항목을 위치시키고 끝이 멀리 가장자리로 밀고 스트레치는 항목이 사용 가능한 공간을 채 웁니다.

이 컨트롤은 사용자 정의 CSS 계산없이 일반적인 레이아웃 두통을 해결합니다.

3. 갭 컨트롤로 물건을 간격으로합니다

갭 컨트롤 컨테이너의 플렉스 아이템 사이에 공간이 추가됩니다 : 열, 모듈 및 컨텐츠 유형 작업. 간격은 지저분한 패딩이나 여백 수학없이 호흡 공간을 만듭니다. 간격은 외부 가장자리가 아닌 항목 사이에만 나타납니다.

수평 간격을 20px로 설정하면 모든 열에 정확한 간격이 있습니다.

수직 간격을 20px로 변경하면 모든 간격이 즉시 업데이트됩니다.

Divi 5는 뷰포트 길이 및 백분율과 같은 고급 CSS 장치를 지원합니다. 화면 크기 사이에 스케일링 된 반응 형 간격을 위해 clamp ()를 사용할 수 있습니다. calc (2rem + 10px)과 같은 단위를 결합한 calc () 함수도 지원됩니다.

여기서 갭 컨트롤은 설계 변수도 지원합니다. 클램프 (16px, 2VW, 32px)를 사용하여 "수평 열 간격"이라는 숫자 변수를 값으로 추가하십시오. 해당 변수를 적용하여 사이트 전체에서 gap 컨트롤을 gap하십시오.

나중에 더 단단한 간격을 원할 때 변수를 편집하십시오. 모든 간격은 즉시 업데이트됩니다.

4. 항목이 랩하는 방식 제어

레이아웃 포장은 품목이 수평 공간이 부족할 때 발생하는 일을 제어합니다. 기본값 없음 랩 설정은 컨테이너에 맞게 항목을 수축시켜 한 줄에 모든 것을 유지합니다. 랩으로 전환하고 자연스러운 크기를 유지하면서 새 라인에 적합하지 않은 품목으로 전환하십시오.

랩 리버스는 일반 랩과 같은 일을하지만 방향을 뒤집습니다. 새로운 선이 아래가 아닌 이전 라인 위에 나타납니다.

이를 통해 항목 오버플로 시각적 계층 구조를 제어 할 수 있습니다. 랩핑 동작은 다양한 화면 크기에 따라 일관되게 유지되므로 레이아웃은 데스크톱에서 모바일로 예측할 수 있습니다.

Divi 5는 또한 래핑 정렬 컨트롤을 제공합니다. 이 기능은 Flex 랩핑 및 다중 라인 양식을 활성화 할 때 자동으로 나타납니다. 방향이 행으로 설정되면 랩핑 정렬은 수직 정렬에 사용할 수 있습니다.

마찬가지로, 열 방향의 경우 옵션은 수평 정렬을위한 것입니다.

스트레치는 사용 가능한 수직 공간을 채우도록 모든 라인을 확장시킵니다. 처음에 많은 선을 시작하고 중앙 클러스터가 중간에 클러스터를 시작하고 반대쪽 가장자리쪽으로 밀어서 끝납니다.

공간 사이의 공간은 동일한 간격으로 스프레드 라인을 차별화하고, 주위의 공간은 각 선이 양쪽에 동등한 호흡 공간을 제공하며, 공간은 모든 라인 사이에 동일한 간격을 생성합니다.

이는 카드 레이아웃, 이미지 갤러리 또는 여러 행에서 자연스럽게 흐르는 컨텐츠에 적합합니다. 품목은 사용 가능한 너비를 기준으로 재배치하면서 비율과 간격을 유지합니다. 작은 화면에서 아이템이 뭉개지 않고 깨끗한 휴식을 취합니다.

5. 다른 화면 크기에서 작업

Divi 5의 7 가지 중단 점은 레이아웃이 어떻게 적응하는지에 대한 세분화 제어를 제공합니다.

각 브레이크 포인트는 독립적으로 작동하므로 데스크탑 행 레이아웃이 손대지 않은 상태에서 레이아웃 방향을 모바일 열로 전환 할 수 있습니다. 휴대 전화의 모든 것을 중심으로 할 수 있지만 더 큰 화면의 정렬 사이에 해당 공간을 유지하십시오.

데스크탑 3 열 설정은 중간 중단 점에 영향을 미치지 않고 모바일에서 단일 열 스택이 될 수 있습니다. 각 화면 크기는 시청 경험에 가장 적합한 것을 정확하게 얻습니다.

새로운 반응 형 편집자는이 프로세스를 훨씬 매끄럽게 만듭니다. 모든 화면 크기의 값을보고 수정하려면 설정 옆에있는 응답 편집기 아이콘을 클릭하여 한 번에 모든 화면 크기를보고 수정하십시오.

그러나 clamp () 값을 사용하여 행과 열을 차단하는 경우 수동 변경이 필요없이 중단 점 사이에 자동으로 스케일링됩니다.

6. 옵션 그룹 사전 설정 만들기

Flexbox 레이아웃을 원하는 방식으로 작동시킨 후에는 옵션 그룹 사전 설정 옵션을 클릭하고 적절하게 라벨링하여 해당 설정을 옵션 그룹 사전 설정으로 저장할 수 있습니다.

갭 값, 정렬 선택 및 랩 설정은 함께 번들로 제공됩니다. 저장을 클릭하면 사이트 전체에서 정확한 레이아웃 구성이 재사용 될 수 있습니다. 저장된 사전 설정을 사용하려면 새 행의 사전 설정 아이콘을 클릭하고 방금 저장된 사전 설정을 선택하십시오.

사전 설정은 고급 장치를 그대로 유지합니다. 귀하의 반응 형 간격은 설정 한 모든 수학으로 전송되며 변경 사항은 다른 중단 점에서도 이루어졌습니다.

오늘 Divi 5의 Flexbox를 시작하십시오

Flexbox는 레이아웃을 변경할 때 파손되는 마진과 패딩 수학을 제거합니다. 미디어 쿼리 및 사용자 정의 섹션으로 반응 형 디자인으로 피해를 중단합니다.

Divi 5는 이러한 추상 CSS 속성을 시각적 제어로 바꿉니다. 버튼을 클릭하여 방향을 설정하고 슬라이더를 드래그하여 간격을 조정하고 랩핑을 켜고 끄는 토글을 할 수 있습니다. 반응 형 편집기는 하나의 패널에서 7 개의 중단 점을 모두 처리하므로 코드를 추측하는 대신 결과를 즉시 볼 수 있습니다.

성공적인 조합을 사전 설정으로 저장하고 어디서나 재사용하십시오. CSS 구문을 디버깅하는 대신 디자인하는 데 시간을 소비합니다.