Flex 레이아웃 (및 포지셔닝)

    Flex 레이아웃이란?

    Flex 레이아웃은 구성 요소 포지셔닝, 항목 간의 공간 분배 및 크기 조정에 사용됩니다. 강력한 정렬 기능을 제공하고, 요소를 열 또는 행으로 배치하며, 화면 크기에 쉽게 적응하는 반응형 페이지 레이아웃을 구축하는 데 도움이 됩니다.

    Flex 레이아웃을 사용하는 방법은?

    본질적으로 Flex 레이아웃은 개발자가 레이아웃 컨테이너의 크기를 쉽게 지정하고, 표시 및 뷰포트 크기를 정의하며, 사용 가능한 공간에 최적으로 맞도록 항목을 축소하거나 확장할 수 있도록 설계되었습니다.

    이 모든 것을 달성하기 위해 Flex 레이아웃을 사용할 때 가장 먼저 해야 할 일은 컨테이너 또는 부모 요소를 대상으로 지정하고 컨테이너 요소의 CSS를 조정하는 것입니다.

    App Builder에서 Flex 레이아웃을 만드는 방법은?

    App Builder에서 Flex 레이아웃을 사용하려면 컨테이너(비디오에서는 캔버스라고 함)를 정의해야 합니다. 표시 속성이 자동으로 Flex로 설정되어 있다는 점에 유의합니다. View로 이동하여 새 컨테이너를 추가하고 Flex 레이아웃 행 또는 Flex 레이아웃 열을 선택합니다.

    이제 다양한 Flex 레이아웃 속성 중에서 선택하여 정렬을 정의하고, flex 항목을 배치하는 방법에 대한 기본 동작을 설정하고, 다른 값을 설정할 수 있습니다.

    App Builder와 일반적인 제품 설계 도구 간의 가장 큰 차이점 중 하나는 디자인-투-코드 도구에 사용되는 flex 기반 레이아웃입니다. App Builder는 웹 앱을 목표로 하기 때문에 레이아웃을 만드는 한 가지 방법으로 Flex을 제공합니다. 도구 상자에서 행 또는 열 레이아웃 구성 요소로 사용할 수 있습니다. 여기에 표시되는 가장 바깥쪽 컨테이너는 캔버스이며 이미 flex 설정이 적용되어 있습니다. 속성 패널에서 뷰포트 크기를 편집하여 캔버스 크기를 변경할 수 있습니다.

    edit-create-canvas-size-Indigo-Design-App-Builder

    캔버스 크기 변경

    행 및 열 레이아웃

    Flex 레이아웃 컨테이너에는 중첩된 UI 요소의 위치를 수정할 수 있는 설정이 있습니다. h.align 및 v.align 속성에 대한 flex 속성이 있으며, 각 드롭다운에서 쉽게 적용할 수 있습니다. 캔버스는 기본적으로 행 레이아웃으로 지정되어 있으며, 수평으로 왼쪽에 정렬되고 수직으로 늘어나 있습니다. 시작한 방식과 관계없이 항상 행 레이아웃과 열 레이아웃 사이를 전환할 수 있습니다. 레이아웃 컨테이너는 콘텐츠를 기준으로 크기가 조정되지만, 항상 높이와 너비를 지정할 수 있습니다. 컨테이너에 패딩 속성을 추가하고, 자식 UI 요소를 간격을 띄우기 위해 여백을 추가할 수도 있습니다. 이는 특정 구성 요소를 선택한 후 화면 오른쪽의 속성 패널에서 패딩 또는 여백을 편집한 후에 수행할 수 있습니다.

    row-column-layout-Indigo-Design-App-Builder

    레이아웃 속성

    자식 요소의 레이블을 클릭하여 항상 부모 UI 요소를 선택할 수 있습니다. 이는 중첩된 레이아웃 컨테이너가 있을 때 유용합니다. 반면, 왼쪽 아래의 개요 메뉴에서 필요한 구성 요소를 직접 선택할 수도 있습니다.

    select-parent-Indigo-Design-App-Builder

    부모 구성 요소 선택

    유동 크기 조정 및 래핑

    주목할 만한 다른 속성은 grow 및 shrink와 관련된 속성입니다. 이들은 뷰포트가 크기를 변경할 때 구성 요소의 크기 조정에 영향을 미칩니다. 구성 요소를 grow로 설정하면 행 레이아웃인 경우 행 방향으로 컨테이너가 확장되거나 열 레이아웃인 경우 열 방향으로 확장됩니다.

    grow-column-row-layout-Indigo-Design-App-Builder

    Grow 열/행 레이아웃 옵션

    상황에 맞는 메뉴를 통해 레이아웃에 추가

    기존 구성 요소를 새 레이아웃에 추가해야 할 필요가 있다면, 매우 유용한 옵션이 있습니다. 선택한 구성 요소를 마우스 오른쪽 버튼으로 클릭하면 상황에 맞는 메뉴를 트리거하고 요소를 행 또는 열 레이아웃에 추가할 수 있습니다.

    add-to-layout-Indigo-Design-App-Builder

    상황에 맞는 메뉴를 통해 레이아웃에 구성 요소 추가

    추가 리소스

    요약하면, Flex 레이아웃에 대해 배운 모든 내용을 편집기에서 그대로 사용할 수 있습니다. Flex 및 CSS를 처음 사용하는 사람들의 경우 익숙해지는 데 다소 시간이 걸릴 수 있지만, 시간이 지남에 따라 레이아웃을 행과 열로 생각하는 것이 훨씬 더 쉬워질 것입니다. 가장 중요한 점은 Flex 레이아웃이 화면 크기에 적응하는 애플리케이션을 구축하고 레이아웃 내에서 구성 요소의 동작을 정의하는 데 도움이 되는 반면, 절대 레이아웃을 사용하면 하나의 화면 크기에 대한 특정 디자인을 가질 수 있다는 것입니다.