Flex Layout

Resizable split panels + Drag & Drop dynamic splits for React. Read the starting document quickly, and the subsequent guides are structured to expand sequentially.

Getting Started

Start here

You can quickly skim through the essential documents needed when using Flex Layout for the first time and run examples right away.

Open section

Guides

Covers practical usage flows including Sticky, Open/Close, DragBox, Dynamic Split View, and the v1.0.0 Next.js URL-based Split Screen.

Open section

Getting Started

You can quickly skim through the essential documents needed when using Flex Layout for the first time and run examples right away.

Full view

Overview

Flex Layout이 무엇인지, 어떤 문제를 해결하는지, 어떤 방향으로 설계되었는지 살펴봅니다.

Open Document

Installation

설치 방법, 의존성, Next.js(App Router) 환경에서의 주의사항을 정리합니다.

Open Document

Quick Start

Recommendation

가장 짧은 코드로 레이아웃을 구성하고, resize panel / grow / nested layout 사용법까지 빠르게 익힙니다.

Open Document

Guides

Covers practical usage flows including Sticky, Open/Close, DragBox, Dynamic Split View, and the v1.0.0 Next.js URL-based Split Screen.

Full view

Guides

Organizes the combination method of flex-layout by actual usage flow.

Open Document

Next.js URL Split Screen

v1.0.0

Server-render a Next.js page.tsx from only its URL and drop it into a FlexLayoutSplitScreen pane.

Open Document