Flex Direction
Nesta seção, você encontra mais informações sobre a propriedade Flex Direction utilizada para posicionar elementos em tela.
Visão Geral
Nesta seção, você encontra mais informações sobre o posicionamento dos componentes na tela de um dispositivo usando Beagle.
Disponibilidade: Beagle 1.0+
Introdução
O Beagle usa uma dependência chamada Yoga layout para posicionar seus componentes na tela de uma aplicação. Para isso, o Yoga calcula a posição dos elementos e, em seguida, faz sua renderização.
Sobre Yoga
O Yoga é um framework desenvolvido pelo Facebook que posiciona os elementos em uma tela usando o conceito Flexbox aplicados ao Android e iOS.
Flexbox é um conceito do CSS que é utilizado para posicionar elementos em contêineres dinamicamente para que, independentemente das dimensões de seu aplicativo, você possa manter um layout flexível.
Seguem alguns conceitos-chave sobre o Flexbox:
- Main Axis:
- Cross Axis:
- Main Size:
No caso do Main Size, é possível ter 3 tipos diferentes de dimensões:
- Cross Size: Tamanho da dimensão cross axis.
- Main Start and Main End: Começo e o fim do main axis.
- Cross Start and Cross End: Começo e o fim do cross axis.
Esses valores para os eixos(axis) dependem de como é definida a propriedade flex-direction.
Se esta propriedade for definida como:
| row ou row-reverse: | column ou column-reverse: |
|---|---|
| O eixo principal (main axis) será horizontal e o eixo transversal (cross axis) será vertical. | O eixo principal (main axis) será vertical e o eixo transversal (cross axis) será horizontal. |
 |  |
Important: O valor default do Beagle é
column ou seja, os elementos serão dispostos em colunas por padrão.Propriedades
Existem algumas propriedades que o Yoga Layout pode usar para inserir, mover ou excluir componentes. A seguir temos algumas delas:
UnitValue
Os atributos Base, Size, Margin, Padding e Position recebem um valo(UnitValue) do tipo Double e um UnitType, do tipo enum com as seguintes opções:
| UnitType | Definição |
|---|---|
| REAL | Aplica o valor Double |
| PERCENT | Aplica o valor Double em forma de percentual do tamanho do pai |
| AUTO | Segue o valor do pai. Exceto quando possui tamanho próprio |
Importante! Os atributos acima quando referenciados em um projeto WEB tem como opção
default is o UnitType.AUTO.O UnitType.AUTO pode ser usado no iOS, Android e Web de acordo com a tabela abaixo:
| Attributes | Android | iOS | WEB |
|---|---|---|---|
| Basis | ✔ | ✔ | ✔ |
| Size | ✔ | ||
| Margin | ✔ | ||
| Padding | ✔ | ||
| Position | ✔ |
Grow
Nesta seção, você encontra mais informações sobre a propriedade Grow utilizada para posicionar elementos em tela.
Justify Content
Nesta seção, você encontra mais informações sobre a propriedade Justify Content utilizada para posicionar elementos em tela.
Align Content
Nesta seção, você encontra mais informações sobre a propriedade Align Content utilizada para posicionar elementos em tela.
Align Items
Nesta seção, você encontra mais informações sobre a propriedade Align Items utilizada para posicionar elementos em tela.
Align Self
Nesta seção, você encontra mais informações sobre a propriedade Align Self utilizada para posicionar elementos em tela.
Flex Wrap
Nesta seção, você encontra mais informações sobre a propriedade Flex Wrap utilizada para posicionar elementos em tela.
Margin
Nesta seção, você encontra mais informações sobre a propriedade Margin utilizada para posicionar elementos em tela.
Padding
Nesta seção, você encontra mais informações sobre a propriedade Padding utilizada para posicionar elementos em tela.
Position
Nesta seção, você encontra mais informações sobre a propriedade Position.
Positiontype
Nesta seção, você encontra mais informações sobre a propriedade Position Type.
Basis
Nesta seção, você encontra mais informações sobre a propriedade Basis utilizada para posicionar elementos em tela.
Shrink
Nesta seção, você encontra mais informações sobre a propriedade Shrink utilizada para posicionar elementos em tela.
Size
Nesta seção, você encontra mais informações sobre a propriedade Size utilizada para posicionar elementos em tela.
Display
Nesta seção, você encontra mais informações sobre a propriedade Display utilizada para posicionar elementos em tela.
Flex
Nesta seção, você encontra mais informações sobre a propriedade Flex utilizada para posicionar elementos em tela.
Feedback
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.
Última modificação 24/06/2021: Fix/fix images component pos main (#659) (40e84be5)