Skip to main content
Version: 6.17.1-beta.3

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.

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 Components

We recommend using the FlexLayout wrapper for the reusable components due to its flexibility in page layout.

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.

ShimmerFlexLayout

Useful Resources

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN favicon https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
Flexbox Froggy
A game for learning CSS flexbox
Flexbox Froggy favicon https://flexboxfroggy.com
Flexbox Froggy
css-tricks.com
css-tricks.com favicon https://css-tricks.com/snippets/css/a-guide-to-flexbox/