FlexLayout
FlexLayout is a view group which has the same behavior with Flexbox on CSS, but for native iOS and Android apps with a fully native implementation.
Its purpose is to provide an easy way to scale, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
FlexLayout has the ability to alter the width/height of its items to fill the available space.
Smartface Native Framework uses Yoga library to implement FlexBox on native applications.
![](https://cdn.smartface.io/docs/components/flexlayout-example.gif)
When to use FlexLayout
When you need to distribute space among items in a container, but the size of the items is unknown and/or dynamic.
When you need to scale and align items in a container, but the size of the items is unknown and/or dynamic.
When you create a new reuseable component which needs to be scaled and aligned.
Reusable ComponentsWe recommend using the FlexLayout wrapper for the reusable components due to its flexibility in page layout.
![](https://cdn.smartface.io/docs/components/flexlayout-reusable-component.gif)
ShimmerFlexLayout
We have a ShimmerFlexLayout component which can be used to show shimmer effect on the items in a FlexLayout.
It's basically a FlexLayout component with a shimmer effect.
Main difference between ShimmerFlexLayout and FlexLayout is that ShimmerFlexLayout is a wrapper component for the FlexLayout component.
ShimmerFlexLayoutUseful Resources
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout