账户中心 退出系统
普通版本 weex版本

graceUI - weex 教程 - flex 布局

Weex Flex 布局

Weex 布局模型基于 CSS Flexbox,以便所有页面元素的排版能够一致可预测,同时页面布局能适应各种设备或者屏幕尺寸。
Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容纳其他元素,那么它就成为 flex 容器。

注意

文档中未说明的 flexbox 属性均不支持:如 order、flex-flow 等。

# Flex 容器

在 Weex 中,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性。

# direction

direction决定了文字方向和Flex容器的基线方向。默认值为ltr。
ltr: 文字和其他元素从左到右排布
rtl: 文字和其他元素从右到左排布。

尽管 direction 不是 Flexbox模型的一部分,但却对 Flexbox 模型有着影响。

# flex-direction

flex-direction定义了 flex 容器中 flex 成员项的排列方向,默认值为 column

column:从上到下排列。
column-reverse: 从下到上排布
row:如果存在direction:ltr,则从左到右排布;如果存在direction:rtl,则从右到左排布。
row-reverse: 排布方向与flex-direction:row相反

# flex-wrap

flex-wrap属性决定了Flex成员项在一行还是多行分布,默认值为nowrap

nowrap: Flex成员项在一行排布,排布的开始位置由direction指定。
wrap:Flex成员项在多行排布,排布的开始位置由direction指定
wrap-reverse: 行为类似于wrap,排布方向与其相反。

# justify-content

定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 flex-start | flex-end | center | space-between,默认值为 flex-start。

flex-start:是默认值,所有的 flex 成员项都排列在容器的前部;
flex-end:则意味着成员项排列在容器的后部;
center:即中间对齐,成员项排列在容器中间、两边留白;
space-between:表示两端对齐,空白均匀地填充到 flex 成员项之间。

# align-items

定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end,默认值为 stretch。

stretch 是默认值,即拉伸高度至 flex 容器的大小;
flex-start 则是上对齐,所有的成员项排列在容器顶部;
flex-end 是下对齐,所有的成员项排列在容器底部;
center 是中间对齐,所有成员项都垂直地居中显示。

# flex

flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1,它们将平均分配剩余空间。如果一个成员项设置的值为 flex: 2,其它的成员项设置的值为 flex: 1,那么这个成员项所占用的剩余空间是其它成员项的 2 倍。Flex 成员项暂不支持 flex-shrink 和 flex-basis 属性。

flex {number}:值为 number 类型。该属性不支持 flex: <flex-grow> | <flex-shrink> | <'flex-basis> 的简写。

具体布局示例请观看本节视频教程。