Latest 0.4.3
License MIT
Platforms ios 7.0, requires ARC

License MIT 
Build Status 

Flexbox in Objective-C, using Facebook’s css-layout.

Inspired by React Native.

  • Flexbox is the best way to layout in mobile platform. So many popular libraries use it, eg: componentkit, AsyncDisplayKit, React Native, weex and so on.
  • React Native,weex and MLLayout are based on the C implementation of facebook/css-layout.
  • Some code references from React Native, eg: snapping to the pixel grid(No misaligned images to improve drawing performance]).
  • MLLayout also can be used for layout calculation only. Every layout associated with a view usually, the calculation updates frames of layouts. You can use the frames directly or change them. with your mind.
  • MLTagViewFrameRecord can preserve current topology of layouts or views. A prerequisite is that each has a valid tag.
  • Using MLTagViewFrameRecord related TableView and TableViewCell can ensure the layout calculation for one row would not be excuted twice unless reloading it explicitly. The feather can improve scrolling performance greatly.

FlexBox Guide:


  • Flexbox是现今移动端最优的布局方式,像componentkit, AsyncDisplayKit, React Native, weex等等优秀的开源库都在使用此种布局方式。
  • React Nativeweex以及MLLayout都一样是基于facebook开源facebook/css-layout的c实现。
  • MLLayout的一些代码实现是借鉴于React Native,例如布局计算结果进行默认像素对齐,提升渲染性能。
  • MLLayout也可以只作为以语义化的形式快速计算布局的工具来用,最终计算出的结果使用与否,随心而定。
  • MLTagViewFrameRecord可以记录当前的布局结构,但是前提是需要缓存frame的view需要有独特的tag,这样后续才能将记录应用到对应的view上。
  • MLTagViewFrameRecord相关的TableView和TableViewCell呢,提供了自动缓存cell布局(当然顺带也有高度啦)的实现,这样的话能保证同一行的布局只会计算一次,除非显式reload。这个能大大的提高列表的滚动性能。




Simple demo below:


MLLayout *bkgViewLayout = [MLLayout layoutWithTagView:_bkgView block:^(MLLayout * _Nonnull l) {
        l.marginLeft = l.marginRight = 10.0f;
        //test for round pixel
        l.padding = UIEdgeInsetsMake(10.34f, 15.37f, 10.5608f, 15.3567f);

        l.flexDirection = MLLayoutFlexDirectionColumn;
        l.alignItems = MLLayoutAlignmentCenter;
        l.alignSelf = MLLayoutAlignmentCenter;
        l.sublayouts = @[
                         [MLLayout layoutWithTagView:_firstLabel block:nil],
                         [MLLayout layoutWithTagView:_secondLabel block:^(MLLayout * _Nonnull l) {
                             l.marginTop = 10.0f; //space
                             l.flex = -1;

    _layout = [MLLayout layoutWithTagView:self.view block:^(MLLayout * _Nonnull l) {
        l.flexDirection = MLLayoutFlexDirectionColumn;
        l.justifyContent = MLLayoutJustifyContentCenter;
        l.alignItems = MLLayoutAlignmentCenter;
        l.sublayouts = @[
                         [MLLayout layoutWithTagView:nil block:^(MLLayout * _Nonnull l) {
                             //test MLLayoutPositionAbsolute
                             l.position = MLLayoutPositionAbsolute;
                             l.bottom = 20.0f;
                             l.right = 20.0;

                             l.flexDirection = MLLayoutFlexDirectionColumn;
                             l.sublayouts = @[
                                              [MLLayout layoutWithTagView:_button block:nil],
                                              [MLLayout layoutWithTagView:displaySwitchButton block:^(MLLayout * _Nonnull l) {
                                                  l.marginTop = 10.0f;
                         [MLLayout layoutWithTagView:_imageView block:^(MLLayout * _Nonnull l) {
                             //test MLLayoutPositionRelative
                             l.position = MLLayoutPositionRelative;
                             l.bottom = 10.0f;


The demo uses MLLayout to layout subviews of cells and MLTagViewFrameRecord to preserve all layout result. Ensure that the layout calculation for one row would not be excuted twice unless reloading it explicitly. The feather can improve scrolling performance greatly.



  1. Add pod 'MLLayout' to your Podfile.
  2. Run pod install or pod update.
  3. Import <MLLayout/MLLayout.h>.


This library requires iOS 7.0+ and Xcode 7.0+.


MLLayout is provided under the MIT license. See LICENSE file for details.

Latest podspec

    "name": "MLLayout",
    "version": "0.4.3",
    "summary": "Flexbox in Objective-C, using Facebook's css-layout.",
    "homepage": "",
    "license": {
        "type": "MIT"
    "authors": {
        "molon": "[email protected]"
    "source": {
        "git": "",
        "tag": "0.4.3"
    "platforms": {
        "ios": "7.0"
    "public_header_files": "Classes/**/*.h",
    "source_files": "Classes/**/*.{h,m,c}",
    "resources": "Classes/**/*.md",
    "requires_arc": true

Pin It on Pinterest

Share This