02
ProAndroidDev
作者：Nav Singh
發布：03-28 15:46
Meet FlexBox: The Powerful New Layout System for Compose
FlexBox acts as a superset, combining Row, Column, and FlowRow capabilities while providing granular control over alignment, wrapping, and item distribution.
重點摘要
Inspired by CSS Flexbox and unified for Jetpack Compose
Supports direction, wrap, justifyContent, alignItems, alignContent, and gap
Per-child flex controls: grow, shrink, basis, order, and alignSelf
Jetpack Compose introduces FlexBox, a new layout composable inspired by CSS Flexbox that unifies Row, Column and FlowRow behaviors into a single, flexible container. FlexBox dynamically arranges children along a configurable main axis (row or column), supports wrapping modes, and exposes layout controls such as justifyContent, alignItems, alignContent and gap. Each child can set flex parameters—grow, shrink, basis, order and alignSelf—to control how it expands, contracts or reorders within available space. The article shows code samples for row and column growth, wrapping, and reverse directions, demonstrating common patterns like fixed-size boxes alongside flexing items. FlexBox simplifies adaptive UI design in Compose by combining predictable alignment and distribution with fine-grained per-child flexibility, making it easier to build responsive layouts without choosing between rigid and dynamic containers.
了解 FlexBox：Compose 的強大新布局系统
FlexBox 将 Row、Column 与 FlowRow 的能力合并，并提供对齐、换行与项目分配的细粒度控制。
重點摘要
以 CSS Flexbox 为灵感，为 Jetpack Compose 提供统一弹性布局
支持 direction、wrap、justifyContent、alignItems、alignContent 和 gap
子项可设定 grow、shrink、basis、order 与 alignSelf 来控制行为
Jetpack Compose 推出 FlexBox，这是一个受 CSS Flexbox 启发的新布局 Composable，将 Row、Column 与 FlowRow 的功能合并为单一弹性容器。FlexBox 可根据主轴方向（Row/Column）动态排列子项，支持多种换行模式，并提供 direction、wrap、justifyContent、alignItems、alignContent 与 gap 等配置。每个子项可以通过 flex 参数（grow、shrink、basis、order、alignSelf）来控制扩展、收缩和显示顺序。文章包含行/列增长、换行与反向等代码示例，展示固定尺寸项与弹性项的混合用法。FlexBox 使 Compose 的自适应 UI 设计更加简洁且可控，避免在刚性与动态布局间的权衡。
認識 FlexBox：Compose 的強大新佈局系統
FlexBox 整合 Row、Column 與 FlowRow 的功能，並提供對齊、換行與項目分配的細緻控制。
重點摘要
以 CSS Flexbox 為靈感，為 Jetpack Compose 提供彈性佈局
支援 direction、wrap、justifyContent、alignItems、alignContent 與 gap
每個子項可設定 grow、shrink、basis、order 與 alignSelf
Jetpack Compose 推出 FlexBox，一個參考 CSS Flexbox 的全新佈局 Composable，將 Row、Column 與 FlowRow 的功能整合為單一彈性容器。FlexBox 可根據主軸方向（Row/Column）動態排列子項目，支援換行模式與配置參數（direction、wrap、justifyContent、alignItems、alignContent、gap）。每個子項可透過 flex 設定 grow、shrink、basis、order 與 alignSelf，控制擴展、收縮與顯示順序。文章附上多個範例（列/欄成長、換行、反向等），示範固定尺寸與彈性項目的混合使用。FlexBox 讓 Compose 的自適應 UI 設計更簡潔且可控，減少在剛性與動態佈局間的取捨。