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 协议。

sleen / flexlayout Goto Github PK

flexlayout's Introduction

FlexLayout

Usage

C/C++

Javascript

Features

Additions

Known Issues

License

中文介绍

使用

C/C++

Javascript

支持的特性

扩展属性

已知问题

协议

flexlayout's People

Contributors

Stargazers

Watchers

Forkers

flexlayout's Issues

Recommend Projects

Recommend Topics

Recommend Org