Get Updates By E-mail 

Article Written By:
Johann Dowa

Open Source Library Extending UIView For Easy Layouts With A CSS Flexbox Style Syntax

  •  
  •  
  •  
  •  
  •  

Earlier this month I mentioned the Swiftbox library for layouts with a CSS flexbox style syntax.

Here’s a library providing a UIKit extension wrapping flexbox properties within a UIView called FlexboxKit submitted by Alex Usbergo.

FlexboxKit provides a category extending UIView allowing you to set its properties directly with a flexbox type syntax along with any subviews.

This example from the readme shows how one could create a complex layout using FlexboxKit:

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;

Resulting in this layout:

FlexBoxKit

You can find FLexboxKit on Github here.

A nice simple way to make use of the flexbox way of laying out elements.


  •  
  •  
  •  
  •  
  •  

Submit A Resource

Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?

You can submit the url here.

The resources we feel will appeal to our readers the most will be posted on the front page.

Comments