FlexLayout

中文介绍

FlexLayout is an C implementation of Flexible Box layout. It follows the standard algorithm and supports almost all features.

FlexLayout is battle tested. Please feel free to use.

Usage

C/C++

FlexNodeRefroot=Flex_newNode();
FlexNodeRefchild1=Flex_newNode();
Flex_setWidth(child1, 50);
Flex_setHeight(child1, 50);
Flex_addChild(root, child1);
FlexNodeRefchild2=Flex_newNode();
Flex_setWidth(child2, 50);
Flex_setHeight(child2, 50);
Flex_addChild(root, child2);
Flex_layout(root, FlexUndefined, FlexUndefined, 1);
Flex_print(root, FlexPrintDefault);
Flex_freeNodeRecursive(root);

Javascript

FlexLayout has ported to javascript by using nbind.

varroot=newflex.Node();root.direction=flex.Vertical;varchild1=newflex.Node();child1.width=newflex.Length(50);child1.height=newflex.Length(50);root.add(child1);varchild2=newflex.Node();child2.setMeasure(function(size){returnnewflex.Size(10,10);});root.add(child2);root.layout(NaN,NaN);root.print();

Features

• margin/padding
• min/max size
• flex-direction
• wrap
• align-items
• align-self
• align-content
• justify-content
• flex-basis
• flex-grow
• flex-shrink
• percentage

Additions

FlexLayout added some useful properties:

• spacing / line-spacing spacing between items/lines
• fixed do not participate the flex layout，like position: absolute
• lines maximum number of lines
• items-per-line maximum number of items in each line

Known Issues

• min-width/min-height do not support auto
• order is not supported

License

Licensed under the MIT License.

---

中文介绍

FlexLayout 是 Flexible Box 布局算法的 C 语言实现。按照标准算法实现，几乎支持所有特性。

FlexLayout 经过充分测试，请放心食用。

使用

C/C++

FlexNodeRefroot=Flex_newNode();
FlexNodeRefchild1=Flex_newNode();
Flex_setWidth(child1, 50);
Flex_setHeight(child1, 50);
Flex_addChild(root, child1);
FlexNodeRefchild2=Flex_newNode();
Flex_setWidth(child2, 50);
Flex_setHeight(child2, 50);
Flex_addChild(root, child2);
Flex_layout(root, FlexUndefined, FlexUndefined, 1);
Flex_print(root, FlexPrintDefault);
Flex_freeNodeRecursive(root);

Javascript

FlexLayout 使用 nbind 移植了 javascript 版本。

varroot=newflex.Node();root.direction=flex.Vertical;varchild1=newflex.Node();child1.width=newflex.Length(50);child1.height=newflex.Length(50);root.add(child1);varchild2=newflex.Node();child2.setMeasure(function(size){returnnewflex.Size(10,10);});root.add(child2);root.layout(NaN,NaN);root.print();

支持的特性

• margin/padding
• min/max size
• flex-direction
• wrap
• align-items
• align-self
• align-content
• justify-content
• flex-basis
• flex-grow
• flex-shrink
• 百分比

扩展属性

FlexLayout 增加了以下扩展属性：

• spacing / line-spacing 为每两个元素/行之间增加间距
• fixed 元素不参与 flex 布局，类似于 position: absolute
• lines 最大行数
• items-per-line 每行最大元素个数

已知问题

• min-width/min-height 不支持设置为 auto
• 不支持 order 属性

协议

遵循 MIT 协议。