{"id":15026545,"url":"https://github.com/layoutbox/flexlayout","last_synced_at":"2025-05-14T05:10:22.348Z","repository":{"id":38206101,"uuid":"94804036","full_name":"layoutBox/FlexLayout","owner":"layoutBox","description":"FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive \u0026 chainable syntax.","archived":false,"fork":false,"pushed_at":"2025-04-29T23:46:39.000Z","size":18000,"stargazers_count":2064,"open_issues_count":12,"forks_count":229,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-04-30T00:29:23.605Z","etag":null,"topics":["css-flexbox","flex-container","flex-items","flex-layout","flexbox","flexbox-container","flexbox-layout","flexbox-properties","ios","ios-lib","ios-swift","ios-ui","layout","layout-engine","swift","swift-3","swift-framework","yoga"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/layoutBox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-06-19T17:40:23.000Z","updated_at":"2025-04-29T23:46:44.000Z","dependencies_parsed_at":"2024-11-19T20:06:26.428Z","dependency_job_id":"61520818-b97d-4c41-89b5-a49006cc0cca","html_url":"https://github.com/layoutBox/FlexLayout","commit_stats":{"total_commits":522,"total_committers":37,"mean_commits":"14.108108108108109","dds":"0.41187739463601536","last_synced_commit":"ad20f2874f0fe87300e89caed2f03d5c9525c3c0"},"previous_names":["lucdion/flexlayout"],"tags_count":78,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layoutBox%2FFlexLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layoutBox%2FFlexLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layoutBox%2FFlexLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layoutBox%2FFlexLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/layoutBox","download_url":"https://codeload.github.com/layoutBox/FlexLayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076850,"owners_count":22010611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-flexbox","flex-container","flex-items","flex-layout","flexbox","flexbox-container","flexbox-layout","flexbox-properties","ios","ios-lib","ios-swift","ios-ui","layout","layout-engine","swift","swift-3","swift-framework","yoga"],"created_at":"2024-09-24T20:04:39.315Z","updated_at":"2025-05-14T05:10:22.322Z","avatar_url":"https://github.com/layoutBox.png","language":"Swift","readme":"\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/layoutBox/FlexLayout\"\u003e\u003cimg src=\"docs_markdown/images/flexlayout-logo-text.png\" alt=\"FlexLayout\" width=\"210\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"\"\u003e\u003cimg src=\"https://img.shields.io/cocoapods/p/FlexLayout.svg?style=flat\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/layoutBox/FlexLayout/actions/workflows/github-actions-ci.yml\"\u003e\u003cimg src=\"https://github.com/layoutBox/FlexLayout/actions/workflows/github-actions-ci.yml/badge.svg?branch=master\" /\u003e\u003c/a\u003e\n\u003c!-- \u003ca href='https://coveralls.io/github/layoutBox/FlexLayout?branch=master'\u003e\u003cimg src='https://coveralls.io/repos/github/layoutBox/FlexLayout/badge.svg?branch=master' alt='Coverage Status' /\u003e\u003c/a\u003e--\u003e\n  \u003ca href='https://img.shields.io/cocoapods/v/FlexLayout.svg'\u003e\u003cimg src=\"https://img.shields.io/cocoapods/v/FlexLayout.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/Carthage/Carthage\"\u003e\u003cimg src=\"https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/layoutBox/FlexLayout.svg?style=flat\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\u003c/p\u003e\n\n\u003cbr\u003e\n\nFlexLayout adds a nice Swift interface to the highly optimized [Yoga](https://github.com/facebook/yoga) flexbox implementation. Concise, intuitive \u0026 chainable syntax.\n\nFlexbox is an incredible improvement over UIStackView. It is simpler to use, much more versatile and amazingly performant.\n\n\u003e Yoga is a multiplatform CSS Flexbox implementation (iOS/Android/...). Yoga is also the layout engine of React Native.\n\n\n### Requirements\n* iOS 12.0+\n* Xcode 12.0+\n* Swift Swift 4.0\n\n### Content\n\n* [Introduction examples](#intro_usage_example)\n* [FlexLayout principles and philosophy](#introduction)\n* [Performance](#performance)\n* [Documentation](#documentation)\n\t* [Creation, modification and definition of flexbox containers](#create_modify_define_containers)\n\t* [Flexbox containers properties](#containers_properties)\n\t* [Flexbox items properties](#intems_properties)\n\t* [Positioning](#positioning)\n\t* [Adjusting the size](#adjusting_size)\n\t\t* [Width, height and size](#width_height_size)\n\t\t* [minWidth, maxWidth, minHeight, maxHeight](#minmax_width_height_size)\n\t\t* [Aspect Ratio](#aspect_ratio)\n\t* [Margins](#margins)\n\t* [Paddings](#paddings)\n* [API Documentation](#api_documentation)\n* [Examples App](#examples_app)\n* [FAQ](#faq)\n* [Comments, ideas, suggestions, issues, ....](#comments)\n* [Installation](#installation)\n\n\u003cbr\u003e\n\n:pushpin: FlexLayout is actively updated. So please come often to see latest changes. You can also **Star** it to be able to retrieve it easily later.\n\n\u003cbr\u003e\n\n### FlexLayout + PinLayout\n\n\u003ca href=\"https://github.com/layoutBox/PinLayout\"\u003e\u003cimg src=\"docs_markdown/images/flexlayout_plus_pinlayout_small.png\" alt=\"FlexLayout\" width=\"250\"/\u003e\u003c/a\u003e\n\n**FlexLayout** is a companion of **[PinLayout](https://github.com/layoutBox/PinLayout)**. They share a similar syntax and method names. PinLayout is a layout framework greatly inspired by CSS absolute positioning, it is particularly useful for greater fine control and animations. It gives you full control by layouting one view at a time (simple to code and debug).\n\n* A view can be layouted using FlexLayout, PinLayout, or both!\n* PinLayout can layout anything, but in situations where you need to layout many views but don't require PinLayout's finest control nor complex animations, FlexLayout is best fitted. \n* A view layouted using PinLayout can be embedded inside a FlexLayout's container and reversely. You choose the best layout framework for your situation. \n\n\u003cbr\u003e\n \n\u003ca name=\"intro_usage_example\"\u003e\u003c/a\u003e\n## FlexLayout Introduction examples \n###### Example 1:\nThis example will layout multiples views using column and row flexbox containers.\n\nTwo steps to use a flexbox container:\n\n1. **Setup the container**: Initialize your flexbox structure. Note that it is also possible to alter it later. \n2. **Layout the container**: The layout of the container should be done from `layoutSubviews()` (or `willTransition(to: UITraitCollection, ...)` and `viewWillTransition(to: CGSize, ...)`). \n\t1. First you must layout the flexbox container, i.e. position it and optionally set its size. \n\t2. Then layout the flexbox children using Flex method `layout()`.\n\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/Intro/IntroView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_intro_all.png\" alt=\"FlexLayout example\"/\u003e\u003c/a\u003e\n\n```swift\nfileprivate let rootFlexContainer = UIView()\n\ninit() {\n   super.init(frame: .zero)\n   \n   addSubview(rootFlexContainer)\n   ...\n\n   // Column container\n   rootFlexContainer.flex.direction(.column).padding(12).define { (flex) in\n        // Row container\n        flex.addItem().direction(.row).define { (flex) in\n            flex.addItem(imageView).width(100).aspectRatio(of: imageView)\n            \n            // Column container\n            flex.addItem().direction(.column).paddingLeft(12).grow(1).define { (flex) in\n                flex.addItem(segmentedControl).marginBottom(12).grow(1)\n                flex.addItem(label)\n            }\n        }\n        \n        flex.addItem().height(1).marginTop(12).backgroundColor(.lightGray)\n        flex.addItem(bottomLabel).marginTop(12)\n    }\n}\n\noverride func layoutSubviews() {\n    super.layoutSubviews() \n\n    // 1) Layout the flex container. This example use PinLayout for that purpose, but it could be done \n    //    also by setting the rootFlexContainer's frame:\n    //       rootFlexContainer.frame = CGRect(x: 0, y: 0, \n    //                                        width: frame.width, height: rootFlexContainer.height)\n    rootFlexContainer.pin.top().left().width(100%).marginTop(topLayoutGuide)\n\n    // 2) Then let the flexbox container layout itself. Here the container's height will be adjusted automatically.\n    rootFlexContainer.flex.layout(mode: .adjustHeight)\n}\n``` \n\n:pushpin: This example is available in the [Examples App](#examples_app). See complete [source code](https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/Intro/IntroView.swift)\n\n\u003c/br\u003e\n\n\u003ca name=\"intro_usage_example_raywenderlich\"\u003e\u003c/a\u003e\n###### Example 2: \nThe example implements the [Ray Wenderlich Yoga Tutorial](https://www.raywenderlich.com/161413/yoga-tutorial-using-cross-platform-layout-engine) screen using FlexLayout. \n\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/RaywenderlichTutorial/RaywenderlichTutorialView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_ray_wenderlich_tutorial.png\" width=200/\u003e\u003c/a\u003e\n\n```swift\ninit() {\n   ...\n\n   rootFlexContainer.flex.define { (flex) in\n        // Image\n        flex.addItem(episodeImageView).grow(1).backgroundColor(.gray)\n        \n        // Summary row\n        flex.addItem().direction(.row).padding(padding).define { (flex) in\n            flex.addItem(summaryPopularityLabel).grow(1)\n            \n            flex.addItem().direction(.row).justifyContent(.spaceBetween).grow(2).define { (flex) in\n                flex.addItem(yearLabel)\n                flex.addItem(ratingLabel)\n                flex.addItem(lengthLabel)\n            }\n            \n            flex.addItem().width(100).height(1).grow(1)\n        }\n        \n        // Title row\n        flex.addItem().direction(.row).padding(padding).define { (flex) in\n            flex.addItem(episodeIdLabel)\n            flex.addItem(episodeTitleLabel).marginLeft(20)\n        }\n        \n        // Description section\n        flex.addItem().paddingHorizontal(paddingHorizontal).define { (flex) in\n            flex.addItem(descriptionLabel)\n            flex.addItem(castLabel)\n            flex.addItem(creatorsLabel)\n        }\n        \n        // Action row\n        flex.addItem().direction(.row).padding(padding).define { (flex) in\n            flex.addItem(addActionView)\n            flex.addItem(shareActionView)\n        }\n        \n        // Tabs row\n        flex.addItem().direction(.row).padding(padding).define { (flex) in\n            flex.addItem(episodesTabView)\n            flex.addItem(moreTabView)\n        }\n        \n        // Shows TableView\n        flex.addItem(showsTableView).grow(1)\n    }\n}\n\noverride func layoutSubviews() {\n    super.layoutSubviews() \n\n    // 1) Layout the contentView \u0026 rootFlexContainer using PinLayout\n    contentView.pin.top().bottom().left().right()\n    rootFlexContainer.pin.top().left().right()\n\n    // 2) Let the flexbox container layout itself and adjust the height\n    rootFlexContainer.flex.layout(mode: .adjustHeight)\n    \n    // 3) Adjust the scrollview contentSize\n    contentView.contentSize = rootFlexContainer.frame.size\n}\n``` \n\n:pushpin: This example is available in the [Examples App](#examples_app). See complete [source code](https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/RaywenderlichTutorial/RaywenderlichTutorialView.swift)\n\n\u003cbr\u003e\n\n\u003ca name=\"introduction\"\u003e\u003c/a\u003e\n## FlexLayout principles and philosophy \n* Flexbox layouting is simple, powerful and fast.\n* FlexLayout syntax is concise and chainable.\n* FlexLayout/yoga is incredibly fast, it's even faster than manual layout. See [Performance](#performance).\n* The source code structure matches the flexbox structure, making it easier to understand and modify. Flex containers are defined on one line, and its items (children) are imbricated. This makes the flexbox structure much more visual and easy to understand.\n* Supports left-to-right (LTR) and right-to-left (RTL) languages.\n\nNOTE: FlexLayout wraps [facebook/yoga](https://github.com/facebook/yoga) implementation and expose all its features. So note that on this documentation we will refer to FlexLayout, but this also applies to Yoga.\n\n\u003cbr\u003e\n\n\u003ca name=\"performance\"\u003e\u003c/a\u003e\n# FlexLayout's Performance \n\nFlexLayout's performance has been measured using the [Layout Framework Benchmark](https://github.com/layoutBox/LayoutFrameworkBenchmark). FlexLayout and [PinLayout](https://github.com/layoutBox/PinLayout) has been added to this benchmark to compare their performance. \n\nAs you can see in the following chart, FlexLayout and PinLayout's performance are faster or equal to manual layouting. FlexLayout and PinLayout are **between 8x and 12x faster than UIStackViews**, and this for all types of iPhone (5S/6/6S/7/8/X)\n\n[See here more complete details, results and explanation of the benchmark](docs_markdown/benchmark.md).\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"docs_markdown/benchmark.md\"\u003e\n\t  \u003cimg src=\"docs_markdown/benchmark/benchmark_comparison_all_small.png\" width=660/\u003e\n\t  \u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003cbr/\u003e\n\n## Variation from CSS flexbox\n\n* In many CSS methods and properties name, the keyword `flex` was added to control name conflicts. FlexLayout removed this keyword for being more concise and removed this unecessary keyword:\n\n\t| FlexLayout Name     | CSS Name | React Native Name |\n\t|---------------------|----------|-------------------|\n\t| **`direction`** | `flex-direction` | `flexDirection` |\n\t| **`wrap`** | `flex-wrap` | `flexWrap` |\n\t| **`grow`** | `flex-grow` | `flexGrow` |\n\t| **`shrink`** | `flex-shrink` | `flexShrink` |\n\t| **`basis`** | `flex-basis` | `flexBasis` |\n\t| **`start`** | `flex-start` | `flexStart` |\n\t| **`end`** | `flex-end` | `flexEnd` |\n\t\n\t\n* FlexLayout default properties are sligthly different from CSS flexbox. This table resume these difference:\n\n\t| Property     | FlexLayout default value | CSS default value | React Native default value |\n\t|--------------|--------------------------|-------------------|----------------------------|\n\t| **`direction`** | column | row | column |\n\t| **`justifyContent`** | start | start | start |\n\t| **`alignItems`** | stretch | stretch | stretch |\n\t| **`alignSelf`** | auto | auto | auto |\n\t| **`alignContent`** | start | stretch | start |\n\t| **`grow`** | 0 | 0 | 0 |\n\t| **`shrink`** | 0 | 1 | 0 |\n\t| **`basis`** | 0 | auto | 0 |\n\t| **`wrap`** | noWrap | nowrap | noWrap |\n\n* **FlexLayout additions**: \n\t* addItem()\n\t* define()\n\t* layout()\n\t* isIncludedInLayout()\n\t* markDirty()\n\t* intrinsicSize\n\t* sizeThatFits()\n\n\t\nNOTE: **FlexLayout** doesn't support the flexbox `order` property. The order is  determined by the flex container's `UIView.subviews` array. \n\n\u003cbr\u003e\n\n\u003ca name=\"documentation\"\u003e\u003c/a\u003e\n# Documentation \n\nFlexbox is pretty easy and straightforward to use. The defining aspect of the flexbox is the ability to alter its items, width, height to best fill the available space on any display device. A flex container expands its items to fill the available free space or shrinks them to prevent overflow.\n\nThe flex layout is constituted of parent container referred as **flex container** and its immediate children which are called **flex items**. A flex item can also be a flex container, i.e. it is possible to add other flex items to it.\n\n##### Axes\nWhen working with StackViews you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by StackView's `direction` property, and the cross axis runs perpendicular to it.\n\n| StackView direction | Axes |\n| --- | --- |\n| **column** (default) | \u003cimg src=\"docs_markdown/images/axis-column.png\" width=\"200\"/\u003e |\n| **row** | \u003cimg src=\"docs_markdown/images/axis-row.png\" width=\"200\"/\u003e |\n\n##### Sections\n\nIn the following sections we will see:\n\n1. How to create, modify and defines flex containers and items.\n2. Flexbox container's properties\n3. Flexbox item's properties\n\n\n:pushpin: This document is a guide that explains how to use FlexLayout. You can also checks the [**FlexLayout's API documentation**](https://layoutBox.github.io/FlexLayout/1.1/Classes/Flex.html).\n\n\u003cbr\u003e\n\n\u003ca name=\"create_modify_define_containers\"\u003e\u003c/a\u003e\n## 1. Creation, modification and definition of flexbox items \n\n### addItem(:UIView)\n- Applies to: `flex containers`\n- Returns: FlexLayout interface of the newly added flex item.\n\n**Method:**\n\n* **`addItem(_: UIView) -\u003e Flex`**  \nThis method adds a flex item (UIView) to a flex container. Internally this method adds the UIView as a subview and enables flexbox.\n\n###### Usage examples:\n```swift\n  view.flex.addItem(imageView).width(100).aspectRatio(1)\n```\n\u003cbr\u003e\n\n### addItem()\n- Applies to: `flex containers`\n- Returns: FlexLayout interface of the newly created flex item.\n\n**Method:**\n\n* **`addItem() -\u003e Flex`**  \nThis method is similar to `addItem(: UIView)` except that it also creates the flex item's UIView. Internally the method creates a UIView, adds it as a subview and enables flexbox. This is useful to add a flex item/container easily when you don't need to refer to it later.\n\n###### Usage examples:\n```swift\n  view.flex.addItem().direction(.row).padding(10)\n```\n\u003cbr\u003e\n\n### define()\n- Applies to: `flex containers`\n- Parameter: Closure of type `(flex: Flex) -\u003e Void`\n\n**Method:**\n\n* **`define(_ closure: (_ flex: Flex) -\u003e Void)`**  \nThis method is used to structure your code so that it matches the flexbox structure. The method has a closure parameter with a single parameter called `flex`. This parameter is in fact the view's flex interface. It can be used to adds other flex items and containers. \n\n###### Usage examples:\n```swift\n  view.flex.addItem().define { (flex) in\n      flex.addItem(imageView).grow(1)\n\t\t\n      flex.addItem().direction(.row).define { (flex) in\n          flex.addItem(titleLabel).grow(1)\n          flex.addItem(priceLabel)\n      }\n  }\n```\n\nThe same results can also be obtained without using the `define()` method, but the result is not as elegant:\n\n```swift\n  let columnContainer = UIView()\n  columnContainer.flex.addItem(imageView).grow(1)\n  view.flex.addItem(columnContainer)\n\t\t\n  let rowContainer = UIView()\n  rowContainer.flex.direction(.row)\n  rowContainer.flex.addItem(titleLabel).grow(1)\n  rowContainer.flex.addItem(priceLabel)\n  columnContainer.flex.addItem(rowContainer)\n```\n\n**Advantages of using `define()`**:\n\n- The source code structure matches the flexbox structure, making it easier to understand and modify.\n\t- Changing a flex item order, it's just moving up/down its line/block that defines it.\n\t- Moving a flex item from one container to another is just moving line/block that defines it.\n- The structure looks more similar to how HTML and React Native defines it.\n- Inside the `define`'s closure, you can do whatever you want to fill the flexbox container. You can use `for` loops, iterate arrays of data, call functions, ...\n \n\u003cbr\u003e\n \n\u003ca name=\"accessing_flexbox_view\"\u003e\u003c/a\u003e\n### Accessing flex item's UIView \nIt is possible to access the flex items's UIView using `flex.view`. This is particularly useful when using `flex.define()` method.\n\n###### Example:\nThis example creates a flexbox container and sets its alpha to 0.8.\n\n```swift\n    view.flex.direction(.row).padding(20).alignItems(.center).define { (flex) in\n        flex.addItem().width(50).height(50).define { (flex) in\n            flex.view?.alpha = 0.8\n        }\n    }\n``` \n\nAnother possible solution:\n\n```swift\n    view.flex.direction(.row).padding(20).alignItems(.center).define { (flex) in\n        let container = UIView()\n        container.alpha = 0.8\n        \n        flex.addItem(container).width(50).height(50)\n    }\n``` \n\u003cbr\u003e\n\n### layout()\n- Applies to: `flex containers`\n- Values: `fitContainer` / `adjustWidth` / `adjustHeight`\n- Default value: `fitContainer`\n\n**Method:**\n\n* **`layout(mode: LayoutMode = . fitContainer)`**  \nThe method will layout the flex container's children.\n\n  Layout modes:\n\n  * **`fitContainer`**: This is the default mode when no parameter is specified. Children are layouted **inside** the container's size (width and height). \n  * **`adjustHeight`**: In this mode, children are layouted **using only the container's width**. The container's height will be adjusted to fit the flexbox's children\n  * **`adjustWidth`**: In this mode, children are layouted **using only the container's height**. The container's width will be adjusted to fit the flexbox's children\n\n###### Usage examples:\n```swift\n  rootFlexContainer.flex.layout(mode: .adjustHeight)\n```\n\n\u003cbr\u003e\n\n\u003ca name=\"containers_properties\"\u003e\u003c/a\u003e\n## 2. Flexbox containers properties  \nThis section describes all flex container's properties.\n\n### direction() \n- Applies to: `flex containers`\n- Values: `column` / `columnReverse` / `row` / `rowReverse`\n- Default value: `column`\n- CSS name: `flex-direction` \n\n**Property:**\n\n* **`direction: Direction?`**  \n\n**Method:**\n\n* **`direction(_: Direction)`**  \nThe `direction` property establishes the main-axis, thus defining the direction flex items are placed in the flex container.\n\n  The `direction` property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis. They can be laid out in two main directions, like columns vertically or like rows horizontally.\n\n  Note that row and row-reverse are affected by the layout direction (see `layoutDirection` property) of the flex container. If its text direction is LTR (left to right), row represents the horizontal axis oriented from left to right, and row-reverse from right to left; if the direction is rtl, it's the opposite.\n\n\n| Value | Result | Description |\n|---------------------|:------------------:|---------|\n| **column** (default) \t| \u003cimg src=\"docs_markdown/images/flexlayout-direction-column.png\" width=\"100\"/\u003e| Top to bottom |\n| **columnReverse** | \u003cimg src=\"docs_markdown/images/flexlayout-direction-columnReverse.png\" width=\"100\"/\u003e| Bottom to top |\n| **row** | \u003cimg src=\"docs_markdown/images/flexlayout-direction-row.png\" width=\"190\"/\u003e| Same as text direction |\n| **rowReverse** | \u003cimg src=\"docs_markdown/images/flexlayout-direction-rowReverse.png\" width=\"190\"/\u003e| opposite to text direction |\n\n\n###### Usage examples:\n```swift\n  view.flex.direction(.column)  // Not required, default value. \n  view.flex.direction(.row)\n```\n\n###### Example 1:\nThis example center three buttons with a margin of 10 pixels between them.  \n[Example source code](https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/Example1/Example1View.swift)\n\n\u003cimg src=\"docs_markdown/images/flexlayout_example_column_center.png\" width=\"160\"/\u003e\n\n```swift\n    rootFlexContainer.flex.justifyContent(.center).padding(10).define { (flex) in\n        flex.addItem(button1)\n        flex.addItem(button2).marginTop(10)\n        flex.addItem(button3).marginTop(10)\n    }\n``` \n\n\u003cbr/\u003e\n\n### justifyContent()\n- Applies to: `flex containers`\n- Values: `start` / `end` / `center` / `spaceBetween` / `spaceAround` / `spaceEvenly`\n- Default value: `start`\n- CSS name: `justify-content` \n\n**Method:**\n\n* **`justifyContent(_: JustifyContent)`**  \nThe `justifyContent` property defines the alignment along the main-axis of the current line of the flex container. It helps distribute extra free space leftover when either all the flex items on a line have reached their maximum size. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. \n\n|                     \t| direction(.column) | direction(.row) | |\n|---------------------\t|:------------------:|:---------------:|:--|\n| **start** (default) \t| \u003cimg src=\"docs_markdown/images/flexlayout-justify-column-flexstart.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-justify-row-flexstart.png\" width=\"160\"/\u003e| Items are packed at the beginning of the main-axis. |\n| **end**\t| \u003cimg src=\"docs_markdown/images/flexlayout-justify-column-flexend.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-justify-row-flexend.png\" width=\"160\"/\u003e| Items are packed at the end of the main-axis. |\n| **center** \t| \u003cimg src=\"docs_markdown/images/flexlayout-justify-column-center.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-justify-row-center.png\" width=\"160\"/\u003e| items are centered along the main-axis. |\n| **spaceBetween** \t| \u003cimg src=\"docs_markdown/images/flexlayout-justify-column-spacebetween.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-justify-row-spacebetween.png\" width=\"160\"/\u003e | Items are evenly distributed in the main-axis; first item is at the beginning, last item at the end. |\n| **spaceAround** \t| \u003cimg src=\"docs_markdown/images/flexlayout-justify-column-spacearound.png\" width=\"140\"/\u003e | \u003cimg src=\"docs_markdown/images/flexlayout-justify-row-spacearound.png\" width=\"160\"/\u003e | Items are evenly distributed in the main-axis with equal space around them. |\n| **spaceEvenly** \t| \u003cimg src=\"docs_markdown/images/flexlayout-justify-column-spaceevenly.png\" width=\"140\"/\u003e | \u003cimg src=\"docs_markdown/images/flexlayout-justify-row-spaceevenly.png\" width=\"160\"/\u003e | Items are evenly distributed in the main-axis with equal space around them. |\n\n###### Usage examples:\n```swift\n  view.flex.justifyContent(.start)  // default value. \n  view.flex.justifyContent(.center)\n```\n\u003cbr/\u003e\n\n### alignItems()\n- Applies to: `flex containers`\n- Values: `stretch` / `start` / `end` / `center` / `baseline`\n- Default value: `stretch`\n- CSS name: `align-items` \n\n**Method:**\n\n* **`alignItems(_: AlignItems)`**  \nThe `alignItems` property defines how flex items are laid out along the cross axis on the current line. Similar to `justifyContent` but for the cross-axis (perpendicular to the main-axis). For example, if children are flowing vertically, `alignItems` controls how they align horizontally. \n\n\n|                     \t| direction(.column) | direction(.row) |\n|---------------------\t|:------------------:|:---------------:|\n| **stretch** (default) \t| \u003cimg src=\"docs_markdown/images/flexlayout-align-column-stretch.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-align-row-stretch.png\" width=\"160\"/\u003e|\n| **start**\t| \u003cimg src=\"docs_markdown/images/flexlayout-align-column-flexStart.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-align-row-flexStart.png\" width=\"160\"/\u003e|\n| **end**\t| \u003cimg src=\"docs_markdown/images/flexlayout-align-column-flexEnd.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-align-row-flexEnd.png\" width=\"160\"/\u003e|\n| **center** \t| \u003cimg src=\"docs_markdown/images/flexlayout-align-column-center.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-align-row-center.png\" width=\"160\"/\u003e|\n\n\n\u003cbr/\u003e\n\n### alignSelf()\n- Applies to: `flex containers`\n- Values: `auto` / `stretch` / `start` / `end` / `center` / `baseline`\n- Default value: `auto`\n- CSS name: `align-self` \n\n**Method:**\n\n* **`alignSelf(_: AlignSelf)`**  \nThe `alignSelf` property controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. For example, if children are flowing vertically, `alignSelf` will control how the flex item will align horizontally. \n\nThe `auto` value means use the flex container `alignItems` property. See `alignItems` for documentation of the other values.\n\n\u003cbr/\u003e\n\n### wrap()\n- Applies to: `flex containers`\n- Values: `noWrap` / `wrap` / `wrapReverse`\n- Default value: `noWrap`\n- CSS name: `flex-wrap` \n\n**Method:**\n\n* **`wrap(_: Wrap)`**  \nThe `wrap` property controls whether the flex container is single-lined or multi-lined, and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.\n\nBy default, the flex container fits all flex items into one line. Using this property we can change that. We can tell the container to lay out its items in single or multiple lines, and the direction the new lines are stacked in\n\nReminder: the cross axis is the axis perpendicular to the main axis. Its direction depends on the main axis direction.\n\n\n|                     \t| direction(.column) | direction(.row) | Description|\n|---------------------\t|:------------------:|:---------------:|--------------|\n| **noWrap** (default) \t| \u003cimg src=\"docs_markdown/images/flexlayout-wrap-column-nowrap.png\" width=\"130\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-wrap-row-nowrap.png\" width=\"180\"/\u003e| Single-line which may cause the container to overflow. NEW: Flex items are displayed in one row and by default they are shrunk to fit the flex container’s width |\n| **wrap** | \u003cimg src=\"docs_markdown/images/flexlayout-wrap-column-wrap.png\" width=\"130\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-wrap-row-wrap.png\" width=\"180\"/\u003e| Multi-lines, direction is defined by `direction()`. NEW: Flex items are displayed in multiple rows if needed from left-to-right and top-to-bottom  |\n| **wrapReverse**\t| \u003cimg src=\"docs_markdown/images/flexlayout-wrap-column-wrapReverse.png\" width=\"130\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-wrap-row-wrapReverse.png\" width=\"180\"/\u003e| Multi-lines, opposite to direction defined by `direction()`. NEW: Flex items are displayed in multiple rows if needed from left-to-right and bottom-to-top |\n\n###### Usage examples:\n```swift\n  view.flex.wrap(.nowrap)  // Not required, default value. \n  view.flex.wrap(.wrap)\n```\n\u003cbr/\u003e\n\n### alignContent()\n- Applies to: `flex containers`\n- Values: `start` / `end` / `center` / `stretch` / `spaceBetween` / `spaceAround` / `spaceEvenly`\n- Default value: `start`\n- CSS name: `align-content`  \n\n**Method:**\n\n* **`alignContent(_: AlignContent)`**  \nThe align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justifyContent aligns individual items within the main-axis.\n\nNote, `alignContent` has no effect when the flexbox has only a single line.\n\n\n|                     \t| direction(.column) | direction(.row) |\n|---------------------\t|:------------------:|:---------------:|\n| **start** (default) \t| \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-column-flexStart.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-row-flexStart.png\" width=\"160\"/\u003e|\n| **end**\t| \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-column-flexEnd.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-row-flexEnd.png\" width=\"160\"/\u003e|\n| **center** \t| \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-column-center.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-row-center.png\" width=\"160\"/\u003e|\n| **stretch**\t| \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-column-stretch.png\" width=\"140\"/\u003e| \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-row-stretch.png\" width=\"160\"/\u003e|\n| **spaceBetween** | \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-column-spaceBetween.png\" width=\"160\"/\u003e | \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-row-spaceBetween.png\" width=\"160\"/\u003e|\n| **spaceAround** | \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-column-spaceAround.png\" width=\"160\"/\u003e | \u003cimg src=\"docs_markdown/images/flexlayout-alignItems-row-spaceAround.png\" width=\"160\"/\u003e|\n| **spaceEvenly** | | |\n\n\u003cbr/\u003e\n\n\n### layoutDirection()\n\nFlexLayout supports left-to-right (LTR) and right-to-left (RTL) languages.\n\nUsing `start` or `end` properties, you can position views without having to think about whether your item will show up on the left or the right side of the screen (depending on the person’s language \n\n**Method:**\n\n* **`layoutDirection(_: LayoutDirection)`**  \nThe `layoutDirection` property controls the flex container layout direction. \n\n  Values:\n  * **`.inherit`**  \nDirection defaults to Inherit on all nodes except the root which defaults to LTR. It is up to you to detect the user’s preferred direction (most platforms have a standard way of doing this) and setting this direction on the root of your layout tree.\n  * **`.ltr`**: Layout views from left to right. (Default)\n  * **`.rtl`**: Layout views from right to left.\n\n\u003cbr\u003e\n\n\u003ca name=\"intems_properties\"\u003e\u003c/a\u003e\n## 3. Flexbox items properties \nThis section describe all flex items's properties.\n\n:pushpin: Remembers that flex containers are also flex items, so all these properties also apply to containers.\n\n### grow \n- Applies to: `flex items`\n- Default value: 0\n- CSS name: `flex-grow` \n\n**Method:**\n\n* **`grow(_: CGFloat)`**  \nThe `grow` property defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.\n\n  A grow value of 0 (default value) keeps the view's size in the main-axis direction. If you want the view to use the available space set a grow value \u003e 0.\n\nFor example, if all items have `grow` set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.\n\n\u003cbr\u003e\n\n### shrink\n- Applies to: `flex items`\n- Default value: 0\n- CSS name: `flex-shrink` \n\n**Method:**\n\n* **`shrink(_: CGFloat)`**  \nIt specifies the \"flex shrink factor\", which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the main-axis.\n  \n  When omitted, it is set to 0 and the flex shrink factor is multiplied by the flex `basis` when distributing negative space.\n\n  A shrink value of 0 keeps the view's size in the main-axis direction. Note that this may cause the view to overflow its flex container.\n  \n  Shrink is about proportions. If an item has a shrink of 3, and the rest have a shrink of 1, the item will shrink 3x as fast as the rest.\n\n\u003cbr\u003e\n\n### basis\n- Applies to: `flex items`\n- Default value: 0\n- CSS name: `flex-basis` \n\n**Method:**\n\n* **`basis(_ : CGFloat?)`**   \nThis property takes the same values as the width and height properties, and specifies the initial size of the flex item, before free space is distributed according to the grow and shrink factors. \n\n  Specifying `nil` set the basis as `auto`, which means the length is equal to the length of the item. If the item has no length specified, the length will be according to its content \n\n* **`basis(_ : FPercent)`**   \nThis property takes the same values as the width and height properties, and specifies the initial size of the flex item, before free space is distributed according to the grow and shrink factors. \n\n\n\u003cbr\u003e\n\n### gap\n- Applies to: `flex containers`\n- CSS name: `gap`\n\n**Method:**\n\n* **`columnGap(_ value: CGFloat)`**\nThis property set distance between columns.\n\n* **`rowGap(_ value: CGFloat)`**\nThis property set distance between rows.\n\n* **`gap(_ value: CGFloat)`**\nThis property set distance between both of rows and columns.\n\n\u003cbr/\u003e\n\n### isIncludedInLayout()\n- Applies to: `flex items`\n\n**Method:**\n\n* **`isIncludedInLayout(_ value: Bool)`**  \nThis property controls dynamically if a flexbox's UIView is included or not in the flexbox layouting. When a flexbox's UIView is excluded, FlexLayout won't layout the view and its children views.\n\nFlexLayout automatically includes the UIView when:\n* The first time `UIView.flex` property is accessed\n* When a child view is added to a flexbox container using `addItem(:UIView)` or `addItem()`\n\n\u003cbr\u003e\n\n### display\n- Applies to: `flex items`\n\n**Method:**\n\n* **`display(_: Display)`**  \n\nSet the item display or not, with `none` value, the item will be hidden and not included in the layout.\n\nValues:\n* **`flex`**: Default value. The item is displayed normally and included in the layout.\n* **`none`**: The item will be hidden and not included in the layout.\n* **`contents`**: The node is removed from the layout flow, while its children are preserved and hoisted. This allows higher-level UI frameworks to compose wrapper components (e.g., to handle events) without influencing the layout of child nodes.\n\n\u003cbr\u003e\n\n### boxSizing\n- Applies to: `flex items`\n\n**Method:**\n\n* **`boxSizing(_: BoxSizing)`**  \n\nSet the box sizing mode for the item. This determines how the width and height of an element are calculated.\n\nValues:\n* **`borderBox`**: Default value. With `borderBox`, the specified dimensions (width, height) include the content, padding, and border. This means the overall size of the element is as defined, with padding and border accounted for inside.\n* **`contentBox`**: With `contentBox`, the specified dimensions refer only to the content area. Padding and borders are added outside these dimensions, potentially increasing the total size of the element.\n\n\u003cbr\u003e\n\n### markDirty()\n- Applies to: `flex items`\n\n**Method:**\n\n* **`markDirty()`**  \nThe framework is so highly optimized, that flex items are layouted only when a flex property is changed and when flex container size change. In the event that you want to force FlexLayout to do a layout of a flex item, you can mark it as dirty using `markDirty()`. \n\n  Dirty flag propagates to the root of the flexbox tree ensuring that when any item is invalidated its whole subtree will be re-calculated.\n\n###### Usage examples:\nIn the case where a UILabel's text is updated, it is needed to mark the label as dirty and relayout the flex container.\n\n```swift\n    // 1) Update UILabel's text\n    label.text = \"I love FlexLayout\"\n     \n    // 2) Mark the UILabel as dirty\n    label.flex.markDirty()\n    \n    // 3) Then force a relayout of the flex container.\n    rootFlexContainer.flex.layout()\n    OR\n    setNeedsLayout()\n```\n\n\u003cbr\u003e\n\n### sizeThatFits()\n- Applies to: `flex items`\n\n**Method:**\n\n* **`sizeThatFits()`**  \nReturns the item size when layouted in the specified frame size.\n\n###### Usage Example:\nGet the size of view when layouted in a container with a width of 200 pixels.\n\n```swift\n    let layoutSize = viewA.flex.sizeThatFits(size: CGSize(width: 200, height: CGFloat.greatestFiniteMagnitude))\n```\n\n\u003cbr\u003e\n\n### intrinsicSize\n- Applies to: `flex items`\n\n**Property:**\n\n* **`intrinsicSize`**  \nItem natural size, considering only properties of the view itself. Independent of the item frame.\n\n\u003cbr\u003e\n\n\u003ca name=\"positioning\"\u003e\u003c/a\u003e\n## 4. Positioning  \n- Applies to: `flex items`\n- Parameter: CGFloat\n\n**Method:**\n\n* **`position(_: Position)`**   \nThe position property tells Flexbox how you want your item to be positioned within its parent. Position values:\n  * **`relative (default)`** The view is positioned using Insets properties (top, bottom, left, right, start, end) from its normal position within its flex container and will take up space within the flex container. This node will always form a containing block.\n  * **`absolute`**: The view is removed from the flex container's flow and is positioned using Insets properties (top, bottom, left, right, start, end). Insets will offset the node from its containing block.\n  * **`static`**: The view ignores insets and will not form a containing block.\n\n###### Usage examples:\n```swift\n  view.flex.position(.relative).top(10).left(10).size(50)\n\n  view.flex.position(.absolute).top(10).left(10).size(50)\n```\n\n### top(), bottom(), left(), right(), start(), end(), vertically(), horizontally(), all()\nA flex item with position set to .relative is positioned relative to its normal position within its flex container. Only one property can be applied in each direction, either vertical or horizontal. If both `top` and `bottom` properties are set, `top` takes precedence. If both `left` and `right` properties are set, `left` takes precedence.\n\nA flex item with position set to .absolute is positioned absolutely with respect to its containing block. Using these properties you can control the size and position of an absolute item within its parent. Because absolutely positioned children don’t affect their sibling's layout. Absolute position can be used to create overlays and stack children in the Z axis. \n\nThis is done through the following methods:\n\n**Methods:**\n\n* **`top(: CGFloat)`** / **`top(: FPercent)`**:  \nControls the distance a child’s top edge is from the parent’s top edge.\n* **`bottom(: CGFloat)`** / **`bottom(: FPercent)`**:  \nControls the distance a child’s bottom edge is from the parent’s bottom edge.\n* **`left(: CGFloat)`** / **`left(: FPercent)`**:  \nControls the distance a child’s left edge is from the parent’s left edge.\n* **`right(: CGFloat)`** / **`right(: FPercent)`**:  \nControls the distance a child’s right edge is from the parent’s right edge.\n* **`start(: CGFloat)`** / **`start(: FPercent)`**:  \nControls the distance a child’s start edge is from the parent’s start edge. In left-to-right direction (LTR), it corresponds to the `left()` property and in RTL to `right()` property.\n* **`end(: CGFloat)`** / **`end(: FPercent)`**:  \nControls the distance a child’s end edge is from the parent’s end edge. In left-to-right direction (LTR), it corresponds to the `right()` property and in RTL to `left()` property.\n* **`vertically(: CGFloat)`** / **`vertically(: FPercent)`**:  \nControls the distance child’s top and bottom edges from the parent’s edges. Equal to `top().bottom()`.\n* **`horizontally(: CGFloat)`** / **`horizontally(: FPercent)`**:  \nControls the distance child’s left and right edges from the parent’s edges. Equal to `left().right()`.\n* **`all(: CGFloat)`** / **`all(: FPercent)`**:  \nControls the distance child’s edges from the parent’s edges. Equal to `top().bottom().left().right()`.\n\n###### Usage examples:\n```swift\n  view.flex.position(.relative).top(10).right(10).width(100).height(50)\n\n  view.flex.position(.absolute).top(10).right(10).width(100).height(50)\n  view.flex.position(.absolute).left(20%).right(20%)\n```\n:pushpin: See the \"Yoga C\" example in the [Examples App](#examples_app). [Source code](https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/YogaExampleC/YogaExampleCView.swift)\n\n\u003cbr\u003e\n\n\u003ca name=\"adjusting_size\"\u003e\u003c/a\u003e \n## 5. Adjusting the size  \n\n\u003ca name=\"width_height_size\"\u003e\u003c/a\u003e\n### Width and height and size \n\nFlexLayout has methods to set the view’s height and width.\n\n**Methods:**\n\n* **`width(_ width: CGFloat?)`**  \nThe value specifies the view's width in pixels. The value must be non-negative. Call `width(nil)` to reset the property.\n* **`width(_ percent: FPercent)`**  \nThe value specifies the view's width in percentage of its container width. The value must be non-negative. Call `width(nil)` to reset the property.\n* **`height(_ height: CGFloat?)`**  \nThe value specifies the view's height in pixels. The value must be non-negative. Call `height(nil)` to reset the property.\n* **`height(_ percent: FPercent)`**  \nThe value specifies the view's height in percentage of its container height. The value must be non-negative. Call `height(nil)` to reset the property.\n* **`size(_ size: CGSize?)`**  \nThe value specifies view's width and the height in pixels. Values must be non-negative. Call `size(nil)` to reset the property.\n* **`size(_ sideLength: CGFloat?)`**  \nThe value specifies the width and the height of the view in pixels, creating a square view. Values must be non-negative. Call `size(nil)` to reset the property.\n\n\n###### Usage examples:\n```swift\n  view.flex.width(100)\t\n  view.flex.width(50%)\t\n  view.flex.height(200)\n\t\n  view.flex.size(250)\n```\n\u003cbr\u003e\n\n\u003ca name=\"minmax_width_height_size\"\u003e\u003c/a\u003e\n### minWidth(), maxWidth(), minHeight(), maxHeight() \n\nFlexLayout has methods to set the view’s minimum and maximum width, and minimum and maximum height. \n\nUsing minWidth, minHeight, maxWidth, and maxHeight gives you increased control over the final size of items in a layout. By mixing these properties with `grow`, `shrink`, and `alignItems(.stretch)`, you are able to have items with dynamic size within a range which you control.\n\nAn example of when Max properties can be useful is if you are using `alignItems(.stretch)` but you know that your item won’t look good after it increases past a certain point. In this case, your item will stretch to the size of its parent or until it is as big as specified in the Max property.\n\nSame goes for the Min properties when using `shrink`. For example, you may want children of a container to shrink to fit on one row, but if you specify a minimum width, they will break to the next line after a certain point (if you are using `wrap(.wrap)`.\n\nAnother case where Min and Max dimension constraints are useful is when using `aspectRatio`.\n\n\n**Methods:**\n\n* **`minWidth(_ width: CGFloat?)`**  \nThe value specifies the view's minimum width of the view in pixels. The value must be non-negative. Call `minWidth(nil)` to reset the property.\n* **`minWidth(_ percent: FPercent)`**  \nThe value specifies the view's minimum width of the view in percentage of its container width. The value must be non-negative. Call `minWidth(nil)` to reset the property..\n* **`maxWidth(_ width: CGFloat?)`**  \nThe value specifies the view's maximum width of the view in pixels. The value must be non-negative. Call `maxWidth(nil)` to reset the property.\n* **`maxWidth(_ percent: FPercent)`**  \nThe value specifies the view's maximum width of the view in percentage of its container width. The value must be non-negative. Call `maxWidth(nil)` to reset the property.\n* **`minHeight(_ height: CGFloat?)`**  \nThe value specifies the view's minimum height of the view in pixels. The value must be non-negative. Call `minHeight(nil)` to reset the property.\n* **`minHeight(_ percent: FPercent)`**  \nThe value specifies the view's minimum height of the view in percentage of its container height. The value must be non-negative. Call `minHeight(nil)` to reset the property.\n* **`maxHeight(_ height: CGFloat?)`**  \nThe value specifies the view's maximum height of the view in pixels. The value must be non-negative. Call `maxHeight(nil)` to reset the property.\n* **`maxHeight(_ percent: FPercent)`**  \nThe value specifies the view's maximum height of the view in percentage of its container height. The value must be non-negative. Call `maxHeight(nil)` to reset the property.\n   \n###### Usage examples:\n```swift\n  view.flex.maxWidth(200)\n  view.flex.maxWidth(50%)\n  view.flex.width(of: view1).maxWidth(250)\n\t\n  view.flex.maxHeight(100)\n  view.flex.height(of: view1).maxHeight(30%)\n```\n\u003cbr\u003e\n\n\u003ca name=\"aspect_ratio\"\u003e\u003c/a\u003e\n### aspectRatio() \nAspectRatio is a property introduced by Yoga that don't exist in CSS. AspectRatio solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to images, videos, and other media types. AspectRatio accepts any floating point value \u003e 0, the default is undefined.\n\n* AspectRatio is defined as the ratio between the width and the height of a node e.g. if a node has an aspect ratio of 2 then its width is twice the size of its height.\n* AspectRatio respects the Min and Max dimensions of an item.\n* AspectRatio has higher priority than `grow`.\n* If AspectRatio, Width, and Height are set then the cross dimension is overridden\n* Call `aspectRatio(nil)` to reset the property.\n\n   \n###### Usage examples:\n```swift\n  imageView.flex.aspectRatio(16/9)\n```\n\u003cbr/\u003e\n\n\n\u003ca name=\"margins\"\u003e\u003c/a\u003e\n## 6. Margins \nBy applying Margin to an item you specify the offset a certain edge of the item should have from it’s closest sibling or parent.\n\n**Methods:**\n\n* **`marginTop(_ value: CGFloat)`, `marginTop(_ percent: FPercent)`**  \nTop margin specify the offset the top edge of the item should have from it’s closest sibling (item) or parent (container).\n* **`marginLeft(_ value: CGFloat)`, `marginLeft(_ percent: FPercent)`**  \nLeft margin specify the offset the left edge of the item should have from it’s closest sibling (item) or parent (container).\n* **`marginBottom(_ value: CGFloat)`, `marginBottom(_ percent: FPercent)`**  \nBottom margin specify the offset the bottom edge of the item should have from it’s closest sibling (item) or parent (container)\n* **`marginRight(_ value: CGFloat)`, `marginRight(_ percent: FPercent)`**  \nRight margin specify the offset the right edge of the item should have from it’s closest sibling (item) or parent (container).\n* **`marginStart(_ value: CGFloat)`, `marginStart(_ percent: FPercent)`**  \nSet the start margin. In LTR direction, start margin specify the **left** margin. In RTL direction, start margin specify the **right** margin.\n* **`marginEnd(_ value: CGFloat)`, `marginEnd(_ percent: FPercent)`**  \nSet the end margin. In LTR direction, end margin specify the **right** margin. In RTL direction, end margin specify the **left** margin.\n* **`marginHorizontal(_ value: CGFloat)`, `marginHorizontal(_ percent: FPercent)`**  \nSet the left, right, start and end margins to the specified value.\n* **`marginVertical(_ value: CGFloat)`, `marginVertical(_ percent: FPercent)`**  \nSet the top and bottom margins to the specified value.\n* **`margin(_ insets: UIEdgeInsets)`**\nSet all margins using an UIEdgeInsets. This method is particularly useful to set all margins using iOS 11 `UIView.safeAreaInsets`.\n* **`margin(_ insets: NSDirectionalEdgeInsets)`**\nSet all margins using an NSDirectionalEdgeInsets. This method is useful to set all margins using iOS 11 `UIView. directionalLayoutMargins` when layouting a view supporting RTL/LTR languages.\n* **`margin(_ value: CGFloat) `**  \nSet all margins to the specified value.\n* **`margin(_ vertical: CGFloat, _ horizontal: CGFloat)`**\n* **`margin(_ top: CGFloat, _ horizontal: CGFloat, _ bottom: CGFloat)`**\n* **`margin(_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat)`**\n\n###### Usage examples:\n```swift\n  view.flex.margin(20)\n  view.flex.marginTop(20%).marginLeft(20%)\n  view.flex.marginHorizontal(20)\n  view.flex.margin(safeAreaInsets)\n  view.flex.margin(10, 12, 0, 12)\n```\n\n\u003cbr\u003e\n\n\u003ca name=\"paddings\"\u003e\u003c/a\u003e\n## 7. Paddings \n\nPadding specify the **offset children should have** from a certain edge on the container. \n\n**Methods:**\n\n* **`paddingTop(_ value: CGFloat)`, `paddingTop(_ percent: FPercent)`**\n* **`paddingLeft(_ value: CGFloat)`, `paddingLeft(_ percent: FPercent)`**\n* **`paddingBottom(_ value: CGFloat)`, `paddingBottom(_ percent: FPercent)`**\n* **`paddingRight(_ value: CGFloat)`, `paddingRight(_ percent: FPercent)`**\n* **`paddingStart(_ value: CGFloat)`, `paddingStart(_ percent: FPercent)`**\n* **`paddingEnd(_ value: CGFloat)`, `paddingEnd(_ percent: FPercent)`**\n* **`paddingHorizontal(_ value: CGFloat)`, `paddingHorizontal(_ percent: FPercent)`**\n* **`paddingVertical(_ value: CGFloat)`, `paddingVertical(_ percent: FPercent)`**\n* **`padding(_ insets: UIEdgeInsets)`** \nSet all paddings using an UIEdgeInsets. This method is particularly useful to set all paddings using iOS 11 `UIView.safeAreaInsets`.\n* **`padding(_ insets: NSDirectionalEdgeInsets)`**  \nSet all paddings using an NSDirectionalEdgeInsets. This method is particularly useful to set all padding using iOS 11 `UIView. directionalLayoutMargins` when layouting a view supporting RTL/LTR languages.\n* **`padding(_ value: CGFloat)`, `padding(_ percent: FPercent)`**\n* **`padding(_ vertical: CGFloat, _ horizontal: CGFloat)`, `padding(_ vertical: FPercent, horizontal: FPercent`**\n* **`padding(_ top: CGFloat, _ horizontal: CGFloat, _ bottom: CGFloat)`,  `padding(_ top: FPercent, _ horizontal: FPercent, _ bottom: FPercent)`**\n* **`padding(_ top: CGFloat, _ left: FPercent, _ bottom: FPercent, _ right: FPercent)`, `padding(_ top: FPercent, _ left: FPercent, _ bottom: FPercent, _ right: FPercent)`**\n\n\n\n###### Usage examples:\n```swift\n  view.flex.padding(20)\n  view.flex.paddingTop(20%).paddingLeft(20%)\n  view.flex.paddingBottom(20)\n  view.flex.paddingHorizontal(20)\n  view.flex.padding(10, 12, 0, 12)\n```\n\n\u003cbr\u003e\n\n\u003ca name=\"uiview_methods\"\u003e\u003c/a\u003e\n## 9. Extra UIView methods \nFlexLayout also adds methods to set common UIView properties.\n\n**Methods:**\n\n* **`backgroundColor(_ color: UIColor)`**  \nSet the flex item's UIView background color. \n* **`cornerRadius(_ value: CGFloat)`**  \nSet the flex item's UIView rounded corner radius.\n* **`border(_ width: CGFloat, _ color: UIColor)`**  \nSet the flex item's UIView border.\n\n###### Usage examples:\n```swift\n  // Create a gray column container and add a black horizontal line separator \n  flex.addItem().backgroundColor(.gray).define { (flex) in\n      flex.addItem().height(1).backgroundColor(.black)\n  }\n  // Set rounded corner\n  flex.addItem().cornerRadius(12)\n  // Set border\n  flex.addItem().border(1, .black)\n```\n\n\u003cbr\u003e\n\n\u003ca name=\"api_documentation\"\u003e\u003c/a\u003e\n## FlexLayout API Documentation \nThe [**complete FlexLayout API is available here**](https://layoutBox.github.io/FlexLayout/1.1/Classes/Flex.html). \n\n\u003cbr\u003e\n\n\u003ca name=\"examples_app\"\u003e\u003c/a\u003e\n## Example App \nThe FlexLayout's Example App exposes some usage example of FlexLayout.   \n[See the Example App section to get more information](docs_markdown/examples.md).\n\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/Intro/IntroView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_intro_portrait.png\" width=90/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/RaywenderlichTutorial/RaywenderlichTutorialView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_ray_wenderlich_tutorial.png\" width=90/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/TableViewExample\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_uitableview.png\" width=90/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/CollectionViewExample/HouseCell.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_example_collectionview.png\" width=90/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/YogaExampleA/YogaExampleAView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_yoga_c.png\" width=90/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/YogaExampleB/YogaExampleBView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_yoga_objc.png\" width=90/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/YogaExampleC/YogaExampleCView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_yoga_java.png\" width=90/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/YogaExampleD/YogaExampleDView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_yoga_csharp.png\" width=90/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/layoutBox/FlexLayout/blob/master/Example/FlexLayoutSample/UI/Examples/YogaExampleE/YogaExampleEView.swift\"\u003e\u003cimg src=\"docs_markdown/images/examples/flexlayout_exampleapp_yoga_android.png\" width=90/\u003e\u003c/a\u003e\n\n\u003cbr\u003e\n\n\n\u003ca name=\"faq\"\u003e\u003c/a\u003e\n## FAQ \n\n*  **Q: The flex item overflows or is bigger than its container?**  \n   **A:** By default the flex item's `shrink` value is 0, which keeps the item's current size in the main-axis direction. So that may cause the item to overflow its flex container. To fix that you just have to specify a `shrink` value bigger than 0:  \n```\n   view.flex.shrink(1)\n```\n\n\n*  **Q: How to keep the view size (width/height)?**  \n   **A:** By default view's flex shrink value is set to 1, which reduce the size of the view if the view is bigger than its flex container in the main-axis direction. If the direction is column, the height is adjusted, if the direction is row, the width is adjusted. Setting this value to 0 will keep the view size in the main-axis direction.\n\n* **Q: How to apply percentage from a CGFloat, a Float or an Int value?**  \n  **R:** Few FlexLayout's method has a parameter of type `FPercent`. You can easily specify this type of parameter simply by adding the `%` operator to your value (eg: `view.flex.width(25%)`. It is similar if you have a value of type CGFloat, Float or Int, simply adds the `%` operator:  \n  \n\t```swift\n\tlet percentageValue: CGFloat = 50\n\tview.flex.height(percentageValue%)\n\t``` \n\n\u003cbr/\u003e\n\n## Flexbox interesting external links\n* [Introduction to Flexbox using Yoga](https://yogalayout.com/)\n* [THE flexbox CSS reference: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n* [Raywenderlich interesting Yoga tutorial](https://www.raywenderlich.com/161413/yoga-tutorial-using-cross-platform-layout-engine)\n* [An Introduction to Flexbox CSS](https://slicejack.com/introduction-to-flexbox/)\n* [Flex Cheatsheet: Test flexbox properties using CSS](https://yoksel.github.io/flex-cheatsheet)\n* [Mozialla: Advanced layouts with flexbox using CSS](https://developer.mozilla.org/en-US/docs_markdown/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox)\n\n\u003cbr/\u003e\n\n\u003ca name=\"comments\"\u003e\u003c/a\u003e\n## Contributing, comments, ideas, suggestions, issues, .... \nFor any **comments**, **ideas**, **suggestions**, simply open an [issue](https://github.com/layoutBox/FlexLayout/issues). \n\nFor **issues**, please have a look at [Yoga's issues](https://github.com/facebook/yoga/issues). Your issue may have been already reported. If not, it may be a FlexLayout issue. In this case open an issue and we'll let you know if the issue is related to Yoga's implementation. \n\nIf you find FlexLayout interesting, thanks to **Star** it. You'll be able to retrieve it easily later.\n\nIf you'd like to contribute, you're welcome!\n\n\u003cbr\u003e\n\n\u003ca name=\"installation\"\u003e\u003c/a\u003e\n## Installation \n\n### CocoaPods\n\nTo integrate FlexLayout into your Xcode project using CocoaPods, specify it in your `Podfile`:\n\n```ruby\n  pod 'FlexLayout'\n```\n\nThen, run `pod install`.\n\n\n### Carthage\n\nTo integrate FlexLayout into your Xcode project using Carthage:\n\n1. Specify in your `Cartfile`:  \n```\ngithub \"layoutBox/FlexLayout\"\n```\n\n2. Run `carthage update` to build frameworks.\n3. Add built `FlexLayout.framework` in your Xcode project in the **Embedded Binaries** section. \n\n\n### Swift Package Manager\n\n#### Another Swift Package\n\nTo integrate FlexLayout into another Swift Package, add it as a dependency:\n\n```\n.package(url: \"https://github.com/layoutBox/FlexLayout.git\", from: \"1.3.18\")\n```\n\n#### In an Xcode target\n\nTo integrate FlexLayout into an Xcode target, use the `File -\u003e Swift Packages -\u003e Add Package Dependency` menu item.\n\n\n\u003cbr/\u003e\n\n## Changelog\nFlexLayout recent history is available in the are documented in the [CHANGELOG](CHANGELOG.md).\n\n\u003cbr\u003e\n\n## License\nMIT License \n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayoutbox%2Fflexlayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flayoutbox%2Fflexlayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayoutbox%2Fflexlayout/lists"}