에서 Flexbox 레이아웃 UI 빌더 을 생성하여 CSS(계단식 스타일시트)로 사용자 지정하고 성능을 개선할 수 있는 강력한 페이지를 빌드합니다.
에서 Flexbox 레이아웃으로 UI 빌더사용자 지정 페이지를 쉽게 빌드할 수 있습니다. 페이지 레이아웃을 사용자 지정하면 Flexbox를 최대한 활용하여 전체적인 페이지 디자인을 구현할 수 있습니다. 자세한 내용은 UI 빌더 페이지에서 구성요소 구성 문서를 참조하십시오.
Flexbox는 CSS의 1차원 레이아웃 시스템입니다. Flexbox는 본질적으로 유연하여 콘텐츠 크기를 모를 때 유용합니다. 복잡한 페이지를 빌드하려는 경우 구성 패널 스타일 탭 또는 CSS를 사용하여 페이지 레이아웃을 사용자 지정할 수 있습니다. Flexbox에 대해 자세히 알아보려면 Mozilla 를 방문하십시오.
다음과 같은 방법으로 레이아웃에서 콘텐츠의 방향을 변경할 수 있습니다.
행: 행은 브라우저의 기본 언어 방향에 따라 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로 구성됩니다. 왼쪽/오른쪽은 영어 브라우저의 경우입니다.
행 역방향: 행은 브라우저의 기본 언어와 반대 방향(예: 오른쪽에서 왼쪽 또는 왼쪽에서 오른쪽)으로 구성됩니다.
열: 위쪽/아래 또는 아래쪽/위
열 반전: 아래/위그림 1. Flexbox 행 및 열 방향
컨텐츠 정당화: 메인 축을 따라 정렬을 정의합니다. 선택 항목은 다음과 같습니다.
Flex-start: 항목은 왼쪽으로 정렬된 콘텐츠와 비슷하게 플렉스 방향의 시작 부분에 있습니다. 이것이 기본 설정입니다.
플렉스 끝: 항목은 오른쪽 맞춤 콘텐츠와 유사하게 플렉스 방향의 끝에 있습니다.
간격: 항목이 균등하게 분배됩니다.
주변 공간: 항목이 주변에 동일한 공간을 두고 고르게 분포됩니다.
공간 균등: 항목 간의 간격이 동일합니다.
항목 정렬: 자유 선택 콘텐츠가 교차 축을 따라 표시되는 방법을 정의합니다. 선택 항목은 다음과 같습니다.
스트레치: 콘텐츠를 늘려 컨테이너를 채웁니다. 이것이 기본 설정입니다.
Flex-start: 콘텐츠를 교차 축의 시작 부분에 배치합니다.
Flex-end: 십자축의 끝에 콘텐츠를 배치합니다.
가운데: 콘텐츠를 십자축의 중심에 배치합니다.
기본 시스템: 기준선 정렬과 동일하게 콘텐츠를 정렬합니다.
높이: 높이를 자동 또는 수동으로 설정합니다.
너비: Flexbox 항목 의 높이를 자동 또는 수동으로 설정합니다.
여백: 플렉스박스 항목 사이의 최소 거리를 설정합니다.
패딩: Flexbox 항목의 각 면에 대한 패딩을 설정합니다.
새 레이아웃 시스템으로 Flexbox 레이아웃 생성
에서 Flexbox 레이아웃을 생성하여 로우코드 환경에서 강력한 페이지를 빌드할 수 있습니다.UI 빌더
선택하여 페이지를 보고 테스트합니다. .
