by alexdrone

A simple UIKit extension to wrap Flexbox layouts.

400 Stars 30 Forks Last release: Not found Other 30 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


Checkout FlexboxLayout if you're interested in the Swift port

A simple UIKit extension to wrap the flexbox properties in regular UIView. This project is based on the robust Facebook's C implementation of Flexbox.

The goal is to have a small standalone UIKit library to layout elements. It doesn't rely on the DOM model at all.



The easiest way to use the flexbox layout facilities is to instantiate a

, set its flexbox properties (as exposed in the UIView category
), add all the subviews you want to it and additionaly set their flex properties.

If you have subviews which themselves will have subviews that you wish to layout using the flexbox engine, you simply have to set the UIView category property

, and so on. You can also have nested

e.g. Given a view (in this case a UITableViewCell) with these subviews:

FLEXBOXContainerView *contentView;
UIView *left, *right;
UILabel *title, *caption;


[contentView addSubview:left]; [contentView addSubview:right]; [contentView addSubview:time];

[right addSubview:title]; [right addSubview:caption];

The following flexbox layout code

contentView.flexDirection = FLEXBOXFlexDirectionRow;

left.flexFixedSize = (CGSize){A_FIXED_SIZE, A_FIXED_SIZE}; left.flexMargin = (UIEdgeInsets){SOME_MARGIN, SOME_MARGIN, SOME_MARGIN, SOME_MARGIN}; left.flexAlignSelf = FLEXBOXAlignmentCenter;

rigth.flexContainer = YES; right.flex = 1; right.flexJustifyContent = FLEXBOXJustificationCenter;

time.flexMargin = (UIEdgeInsets){SOME_MARGIN, SOME_MARGIN, SOME_MARGIN, SOME_MARGIN}; time.flexPadding = (UIEdgeInsets){SOME_PADDING, SOME_PADDING, SOME_PADDING, SOME_PADDING}; time.flexAlignSelf = FLEXBOXAlignmentCenter;

Results in:


Advanced usage

You can use FlexboxKit without using

by simply having a
-[UIView layoutSubviews]
implementation that calls the
-[UIView flexLayoutSubviews]
method defined in the UIView category


- (void)layoutSubviews
    [super layoutSubviews];
    [self flexLayoutSubviews];

If you wish to run the layout engine on a background thread you can do so by calling

[node layoutConstrainedToMaximumWidth:self.bounds.size.width]
in a background thread and then set the computed frames in the main thread.


- (void)flexLayoutSubviewsInBackground
    __weak __typeof(self) weakSelf = self;
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{

    __strong __typeof(self) strongSelf = weakSelf;

    //run the flexbox engine on a backgroun thread...
    strongSelf.flexNode.dimensions = strongSelf.bounds.size;
    [strongSelf.flexNode layoutConstrainedToMaximumWidth:strongSelf.bounds.size.width];

    dispatch_async(dispatch_get_main_queue(), ^{

        //assign the computed frames on the main thread...
        for (NSUInteger i = 0; i < strongSelf.flexNode.childrenCountBlock(); i++) {

            UIView *subview = self.subviews[i];
            FLEXBOXNode *subnode = strongSelf.flexNode.childrenAtIndexBlock(i);
            subview.frame = CGRectIntegral(subnode.frame);

        strongSelf.frame = (CGRect){strongSelf.flexNode.frame.origin, strongSelf.flexNode.frame.size};




It uses Facebook's flexbox implementation and was inspired by Josh Abernathy's SwiftBox and Robert Böhnke's FLXView.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.