amendgit / FlexLayout

an implementation of Flexbox(Flexible Box) layout algorithm

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++

    FlexNodeRef root = Flex_newNode();
    
    FlexNodeRef child1 = Flex_newNode();
    Flex_setWidth(child1, 50);
    Flex_setHeight(child1, 50);
    Flex_addChild(root, child1);

    FlexNodeRef child2 = 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.

    var root = new flex.Node();
    root.direction = flex.Vertical;

    var child1 = new flex.Node();
    child1.width = new flex.Length(50);
    child1.height = new flex.Length(50);
    root.add(child1);

    var child2 = new flex.Node();
    child2.setMeasure(function(size){return new flex.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++

    FlexNodeRef root = Flex_newNode();
    
    FlexNodeRef child1 = Flex_newNode();
    Flex_setWidth(child1, 50);
    Flex_setHeight(child1, 50);
    Flex_addChild(root, child1);

    FlexNodeRef child2 = 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 版本。

    var root = new flex.Node();
    root.direction = flex.Vertical;

    var child1 = new flex.Node();
    child1.width = new flex.Length(50);
    child1.height = new flex.Length(50);
    root.add(child1);

    var child2 = new flex.Node();
    child2.setMeasure(function(size){return new flex.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 协议。