영어로 읽기

다음을 통해 공유

Flex 컨테이너를 사용하여 그룹화하고 맞추다 구성 요소를 사용합니다.

  • 아티클
  • 2025. 01. 21.

Flex Container는 웹 페이지의 섹션 레이아웃을 디자인하고 구축하는 데 도움이 되는 레이아웃 구성 요소입니다. Flex 컨테이너를 사용하면 버튼, 텍스트, 이미지 및 기타 컨테이너와 같은 구성 요소를 그룹화할 수 있습니다.

Flex 컨테이너 추가

웹 페이지에 플렉스 컨테이너를 추가하려면:

  1. 디자인 스튜디오를 열어 페이지의 콘텐츠 및 구성 요소를 편집합니다.

  2. 편집할 페이지를 선택합니다.

  3. Flex 컨테이너 구성요소를 추가할 섹션을 선택합니다.

  4. 편집 가능한 캔버스 영역 위로 마우스를 이동한 다음 구성 요소 패널에서 Flex 컨테이너 구성 요소를 선택합니다.

버튼 과 텍스트와 같은 다른 구성 요소를 Flex 컨테이너에 추가하여 구성 요소 그룹을 만들 수 있습니다.

Flex 컨테이너의 스타일을 지정하고 구성할 수도 있습니다.

Flex 컨테이너 편집

플렉스 컨테이너를 추가한 후 플렉스 컨테이너 컨트롤을 선택하여 속성 표시줄을 열고 플렉스 컨테이너를 편집합니다.

속성 설명
설계 디자인 속성을 변경하여 Flex 컨테이너의 모양을 사용자 지정하세요.
백그라운드 편집 선택한 스타일 템플릿의 색상 팔레트에 따라 배경 색상을 변경합니다. 배경 이미지를 추가하고 크기와 위치를 조정할 수도 있습니다.
방향 및 정렬 변경 맞추다 및 flex 컨테이너의 콘텐츠 방향을 변경합니다.
기타 섹션을 복제하거나, 페이지 내에서 위나 아래로 이동하거나, 섹션을 완전히 삭제하세요.

디자인 속성

디자인 스튜디오에서는 다음 디자인 속성을 구성할 수 있습니다.

HTML에 flex 컨테이너 추가

Visual Studio 웹용 코드(프리뷰)를 사용하여 웹 페이지의 HTML에 직접 플렉스 컨테이너를 추가할 수도 있습니다.

디자인 스튜디오에서 사용자 정의 Flexbox div의 캔버스 편집을 인식하고 허용하려면 해당 div에 CSS 클래스 "ppFlexContainer"를 적용합니다.

중요

ppFlexContainer 클래스가 없으면 Design Studio에서 사용자 지정 div를 Flex 컨테이너 구성 요소로 인식하지 못하고, Design Studio에서 이를 편집할 수 없습니다.

HTML 
<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
    <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
        <div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
            <div class="ppFlexContainer">
                <button type="button" class="button1">Button</button>
                <button type="button" class="button1">Button</button>
            </div>
        </div>
    </div>
</div>

사용자 지정 레이아웃 구축

여러 Flex 컨테이너를 사용하여 사용자 지정 레이아웃을 구축할 수 있습니다. 다음은 수행할 수 있는 작업의 몇 가지 예입니다.

카드 레이아웃를 설정하세요

플로팅 카드 설정

추가 리소스

설명서