NativeScript/tests/app/ui/layouts/flexbox-layout.md

nav-title	title	environment	description
flexbox-layout How-To	flexbox-layout	nativescript	Examples for using flexbox-layout

FlexboxLayout

Using a FlexboxLayout requires the FlexboxLayout module. {%snippet flexbox-layout-require%}

Using the flexbox layout in the NativeScript framework requires the FlexboxLayout view with children. The FlexboxLayout will automatically serve as if it were a div with { display: flex; }.

Here is a good guide on using flexbox.

The FlexboxLayout implementation is based on existing Apache-2 licensed flexbox implementation hosted on github.com/google/flexbox-layout.

Properties

The flexbox properties supported at the moment can be set in JavaScript, the NativeScript markup or in CSS.

The supported properties on the FlexboxLayout container are:

• display: This works as if set to flex by default on the FlexboxLayout
• flex-direction:
  • Set in CSS using style="flex-direction: row;"
  • Set in JavaScript using the property - fb.flexDirection = FlexDirection.ROW
  • Set in XML using the attribute - <FlexboxLayout flexDirection="row">
• flex-wrap:
  • Set in CSS using style="flex-wrap: wrap;"
  • Set in JavaScript using the property - fb.flexWrap = FlexWrap
  • Set in XML using the attribute - <FlexboxLayout flexWrap="wrap">
• flex-flow:
  • Set in CSS using style="flex-flow: row wrap;"
  • The shorthand property has no alternative in JavaScript or in the markup
• justify-content:
  • Set in CSS using style="justify-content: space-between;"
  • Set in JavaScript using the property - fb.justifyContent = JustifyContent.SPACE_BETWEEN
  • Set in XML using the attribute - <FlexboxLayout justifyContent = "space-between">
• align-items:
  • Set in CSS using style="align-items: stretch;"
  • Set in JavaScript using the property - fb.alignItems = AlignItems.STRETCH
  • Set in XML using the attribute - <FlexboxLayout alignItems = "stretch">
• align-content:
  • Set in CSS using style="align-content: space-between;"
  • Set in JavaScript using the property - fb.alignContent = AlignContent.SPACE_BETWEEN
  • Set in XML using the attribute - <FlexboxLayout alignContent = "space-between">

NOTE: There is a limitation for align-items in iOS, the baseline option can not be used.

The supported flexbox properties on child elements are as follow:

• order:
  • Set in CSS using style="order: 1;"
  • Set in JavaScript using the method flexbox.FlexboxLayout.setOrder(child, 1)
  • Set in XML using the attribute order="1"
• flex-grow:
  • Set in CSS using style="flex-grow: 1;"
  • Set in JavaScript using the method flexbox.FlexboxLayout.setFlexGrow(child, 1)
  • Set in XML using the attribute flexGrow="1"
• flex-shrink:
  • Set in CSS using style="flex-shrink: 1;"
  • Set in JavaScript using the method flexbox.FlexboxLayout.setFlexShrink(child, 1)
  • Set in XML using the attribute flexShrink="1"
• flex-basis: The NativeScript layout supports setting width or height as fixed values or percent, use them instead
• flex:
  • Set in CSS using style="flex: 1 1;"
  • The shorthand property has no alternative in JavaScript or markup, set the flex-grow, flex-shrink, width or height instead
• align-self:
  • Set in JavaScript using the method flexbox.FlexboxLayout.setAlignSelf(child, AlignSelf.STRETCH)
  • Set in XML using the attribute <FlexboxLayout><Button alignSelf="stretch" /></FlexboxLayout>
• flex-wrap-before: Non-spec property controlling item wrapping, setting to true on flexbox child will force it to wrap on a new line
  • Set in CSS using: style="flex-wrap-before: true"
  • Set in JavaScript using the method flexbox.FlexboxLayout.setFlexWrapBefore(child, true)
  • Set in XML using the attribute <FlexboxLayout><Button flexWrapBefore="true" /></FlexboxLayout>

NOTE: There is a limitation for align-self in iOS, the baseline option can not be used.

Use in XML layout

{%snippet flexbox-layout-page%}