Flex Direction
This section lists information about the Flex Direction property
Beagle v1.5 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
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 to position views using the Flexbox concept in Android and iOS applications.
Flexbox is a CSS concept that organizes 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:
You can use the following properties that Yoga Layout uses to insert, alter or delete screen’s components.
The Basis, Size, Margin, Padding and Position attributes described above 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 |
For the attributes listed below, on the Web, the default isUnitType.AUTO
.
The UnitType.AUTO
can be used on iOS, Android and Web fronts according to the table below:
Attributes | iOS | Android | 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.