Another Vue of NativeScript Webinar is now on YouTube
FlexboxLayout

This is an overview of the most common usage of FlexboxLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for FlexboxLayout.

El contenedor <FlexboxLayout> es una implementación (no exacta) de CSS Flexbox Layout. Este contenedor, permite ubicar elemento hijos de forma horizontal y vertical.

Ejemplos

Contenido flexible por defecto

El siguiente ejemplo crea una fila de tres elementos (equivalentes en tamaño) que se expanden a lo largo de la pantalla.

<FlexboxLayout backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43b883"/>
  <Label text="second" width="70" backgroundColor="#1c6b48"/>
  <Label text="third" width="70" backgroundColor="#289062"/>
</FlexboxLayout>

Contenido flexible en columnas

El siguiente ejemplo crea una columna de tres elementos (equivalentes en tamaño) que se expanden a lo ancho de la pantalla.

<FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43b883"/>
  <Label text="second" height="70" backgroundColor="#1c6b48"/>
  <Label text="third" height="70" backgroundColor="#289062"/>
</FlexboxLayout>

Contenido en fila con items alineados con flex-start

El siguiente ejemplo crea una fila de tres elementos ubicados en la parte superior de la pantalla. Los elementos se colocan en órden de declaración.

<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
  <Label text="first" width="70" height="70" backgroundColor="#43b883"/>
  <Label text="second" width="70" height="70" backgroundColor="#1c6b48"/>
  <Label text="third" width="70" height="70" backgroundColor="#289062"/>
</FlexboxLayout>

Contenido en fila con órden personalizado

El siguiente ejemplo crea una fila de tres elementos ubicados en la parte superior de la pantalla. Los elementos se colocan con un órden personalizado usando la propiedad order.

<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
  <Label text="first" order="2" width="70" height="70" backgroundColor="#43b883"/>
  <Label text="second" order="3" width="70" height="70" backgroundColor="#1c6b48"/>
  <Label text="third" order="1" width="70" height="70" backgroundColor="#289062"/>
</FlexboxLayout>

Contenedor envolventes

El siguiente ejemplo crea cuatro elementos envolventes. Cuando la fila no tiene espacio suficiente, el contenedor envuelve el ultimo elemento en una nueva línea.

<FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
  <Label text="first" width="30%" backgroundColor="#43b883"/>
  <Label text="second" width="30%" backgroundColor="#1c6b48"/>
  <Label text="third" width="30%" backgroundColor="#289062"/>
  <Label text="fourth" width="30%" backgroundColor="#289062"/>
</FlexboxLayout>

Contenido en columna de forma invertida

El siguiente ejemplo muestra como usar:

  • flexDirection para colocar elementos en una columna, empezando por la parte inferior.
  • justifyContent para crear espacio equivalente (vertical) entre elementos.
  • alignSelf para modificar la posición de los elementos en base al eje horizontal.
<FlexboxLayout flexDirection="column-reverse" justifyContent="space-around" backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43b883"/>
  <Label text="second" alignSelf="center" width="70" height="70" backgroundColor="#1c6b48"/>
  <Label text="third\nflex-end" alignSelf="flex-end" width="70" height="70" backgroundColor="#289062"/>
  <Label text="fourth" height="70" backgroundColor="#289062"/>
</FlexboxLayout>

Propiedades

NombreTipoDescripción
flexDirectionStringLa dirección la que los elementos hijos son colocados en el contenedor. Posibles valores: row (direccion igual a la del texto), row-reverse (dirección contraria a la del texto), column (igual que row pero del márgen superior al inferior(top y bottom)) y column-reverse (igual que row-reverse pero del márgen superior al inferior(top y bottom)).
Valor por defecto: row.
flexWrapStringEstablece cuando los elementos hijos son forzados a encajar en una sola línea o pueden acomodarse en líneas múltiples. Si se establece como líneas múltiples también se define el cross-axis, el cual determina la dirección de las nuevas líneas. Posibles valores: nowrap (una sola línea, puede causar un overflow en el contenedor), wrap (múltiples líneas, dirección definida por flexDirection) y wrap-reverse (múltiples líneas, dirección opuesta a la definida por flexDirection).
Valor por defecto: nowrap.
justifyContentStringEstablece el alineamiento de los elementos segun el eje principal. Ayuda a distribuir espacio libre adicional cuando todos los elementos flexibles de una línea (inflexibles o flexibles), han alcanzado su tamaño máximo. También ejerce cierto control sobre la alineación de los elementos cuando desbordan la línea. Posibles valores: flex-start (los elementos se alinean desde la linea del comienzo), flex-end (los elementos se alinean desde la linea del final), center (los elementos se centran), space-between (los elementos se distribuyen parejamnete sobre la linea, primer item en la primera linea, ultimo item en la ultima linea) y space-around (los elementos se distribuyen parejamente en la linea, con el mismo espacio de margenes entre cada uno).
Valor por defecto: flex-start.
alignItemsStringEstablece como los elementos se ubican a lo largo del eje transversal de la línea. Es quivalente a la propiedad justifyContent pero tomando como base el eje transversal. Posibles valores: flex-start (El borde del margen de inicio de los artículos se coloca en la línea de inicio), flex-end (El borde del margen de inicio de los artículos se coloca en la línea del final), center (los elementos quedan centrados), baseline (los elementos se alinean de la misma forma que sus líneas base), stretch (los elementos se estiran para rellenar el contenedor, pero aún asi respetan min-width/max-width).
Valor por defecto: stretch.
alignContentStringEstablece como los elementos se ubican in el contenedor flexible basado en el eje transversal, similar a como justifyContent alinea los items en el eje principal. Posibles valores: flex-start (se alinea al comienzo del contenedor), flex-end (se alinea al final del contenedor), center (se alinea en el centro del contenedor), space-between (se distribuye el contenido de forma pareja, la primer línea al comienzo del contendor y la última al final), space-around (se distribuye el contenido de forma pareja con igual espacio entre cado uno de los elementos), and stretch (el contenido se estira hasya llenar el espacio disponible).
Valor por defecto: stretch. Esta propiedad no tiene ningún efecto, cuando el contenedor tiene un solo elemento hijo.

Propiedades de elementos hijos

Cuando un elemento es hijo directo de <FlexboxLayout>, las siguientes propiedades pueden ser utilizadas en ese elemento hijo:

NombreTipoDescripción
orderNumberCambia el órden por defecto del elemento
flexGrowNumberValor sin unidad que indica si el elemento flexible puede crecer (en caso de ser necesario). Señala qué cantidad de espacio disponible, dentro del contenedor flexible, debe ocupar el elemento
flexShrinkNumberUn valor que indica el "factor de contracción flexible", que determina cuánto se encogerá el elemento en relación con el resto de los elementos en el contenedor cuando no hay suficiente espacio en la fila. Cuando se omite, se establece en 1 y el factor de contracción flexible se multiplica por la base flexible.
alignSelfStringUn valor que sobre escribre la propiedad alignItems para un elemento especifico. Esta propiedad acepta los mismo valores que la propiedad alignItems: flex-start, flex-end, center, baseline y stretch.
Valor por defecto: stretch.
flexWrapBeforeBooleanUn valor booleano para controlar cuando el item debe envoler o no el contenido. Con el valor true se fuerza a que el contenido sea envuelto en una nueva línea.
Valor por defecto: false. (Esta propiedad no forma parte de la especificación oficial de flexbox)
Contributors