Flex Direction
This section lists information about the Flex Direction property
Beagle will use a dependency called Yoga layout to position components on your application screen. To do this, Yoga calculates the position the elements are, and after that, it does its rendering.
Yoga is framework developed by Facebook that position views using the Flexbox concept for Android and iOS applications.
Flexbox is a CSS concept that positions elements in containers dynamically so that, regardless of your application dimensions, you can maintain a flexible layout.
Here follows some key concepts about Flexbox:
For Main Size, it is possible to set 3 types of dimensions:
These axis values will depend on what is defined at the Flex-direction property.
If it is defined as:
row ou row-reverse: | column ou column-reverse: |
---|---|
The main axis will be horizontal and the cross axis will be vertical. | The main axis will be vertical and the cross axis will be horizontal. |
There are some properties that Yoga Layout may use to insert, alter or delete components.
The Basis, Size, Margin, Padding and Position attributes receive a UnitValue
that expects a Double
value and a UnitType
, which is an enum
with the following options:
UnitType | Definition |
---|---|
REAL | Apply a Double value |
PERCENT | Apply a Double value as percentage of the parent size |
AUTO | Follows the parent’s value. Except when it has its own size |
Important! For the attributes above, the WEB default is UnitType.AUTO . |
The UnitType.AUTO
can be used on iOS, Android and Web fronts according to the table below:
Attributes | Android | iOS | WEB |
---|---|---|---|
Basis | ✔ | ✔ | ✔ |
Size | ✔ | ||
Margin | ✔ | ||
Padding | ✔ | ||
Position | ✔ |
This section lists information about the Flex Direction property
This section lists information about the Grow property
Here, you’ll find lists' information about the Justify Content property
This section lists information about the Align Content property
This section lists information about the Align Items property
This section lists information about the Align Self property
This section lists information about the Flex Wrap property.
This section lists information about the Margin property
This section lists information about the Padding property.
Here you’ll find Position description and its proprieties details.
This section lists information about the Position Type property
This section lists information about the Basis property
This section lists information about the Shrink property
This section lists information about the Size property
This section lists information about the Display property
This section lists information about the Flex property
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.