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