Skip to content

an implementation of Flexbox(Flexible Box) layout algorithm

License

Notifications You must be signed in to change notification settings

Sleen/FlexLayout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.


中文介绍

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

About

an implementation of Flexbox(Flexible Box) layout algorithm

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published