Flex 레이아웃
Flex 레이아웃
Flex 레이아웃은 PatternFly의 spacer와 breakpoint 시스템을 활용해 완전히 커스텀한 레이아웃을 지원해요. 무한히 중첩할 수 있으며 간격, 방향, 정렬, 정렬 기준, 줄바꿈, 너비를 필요에 맞게 조정할 수 있어요.
출처: 문서
본문
요소 (Elements)
- Flex: 모든 flex 항목을 담는 flex 컨테이너입니다.
- Flex item: flex 컨테이너 안에 배치할 개별 콘텐츠 섹션입니다.
사용 (Usage)
Flex 레이아웃은 다른 레이아웃과 결합하여 다재다능한 UI를 만들 수 있어요.
예를 들어 대시보드 패턴은 grid 레이아웃과 flex를 결합해 정보의 반응성을 개선합니다. 마찬가지로 primary-detail 패턴은 stack 레이아웃과 flex를 결합해 아이콘과 버튼이 화면 크기 변화에 반응하도록 보장합니다.
flex 레이아웃을 사용할 때 (When to use the flex layout)
콘텐츠가 많은 UI와 UI 요소를 줄바꿈해야 할 때 flex 레이아웃을 사용하세요.
flex 레이아웃 vs grid 레이아웃 (When to use the flex layout vs the grid layout)
엄격한 그리드가 필요하지 않거나 원하지 않을 때 flex 레이아웃을 사용하세요. 더 구조화된 레이아웃이 필요하다면 grid 레이아웃을 고려해 보세요.
변형 (Variations)
Flex 레이아웃은 CSS의 "flex" 속성을 기반으로 하며, flex 항목이 컨테이너의 사용 가능한 공간에 맞춰 어떻게 grow하거나 shrink하는지를 결정하는 데 도움을 줍니다. 이러한 속성들은 flex 레이아웃의 구현과 모양에 다양한 변형을 가능하게 합니다.
대부분의 flex 레이아웃 변형은 표준 breakpoint에서 사용할 수 있어요. 향후에는 ResizeObserver를 통해 이러한 modifier를 적용할 계획입니다.