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

nav-title, title, environment, description

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 or the NativeScript markup. Support for flexbox properties in CSS is yet missing.

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 JavaScript using the property - fb.flexDirection = FlexDirection.ROW
  • Set in XML using the attribute - <FlexboxLayout flexDirection="row">
• flex-wrap: Use the property - flexWrap
  • Set in JavaScript using the property - fb.flexWrap = FlexWrap
  • Set in XML using the attribute - <FlexboxLayout flexWrap="wrap">
• flex-flow: the shorthand property has no alternative, set the flex properties one by one
• justify-content: Use the property - justifyContent
  • Set in JavaScript using the property - fb.justifyContent = JustifyContent.SPACE_BETWEEN
  • Set in XML using the attribute - <FlexboxLayout justifyContent = "space-between">
• align-items: Use the property - alignItems
  • Set in JavaScript using the property - fb.alignItems = AlignItems.STRETCH
  • Set in XML using the attribute - <FlexboxLayout alignItems = "stretch">
• align-content: Use the property - alignContent
  • 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 JavaScript using the method flexbox.FlexboxLayout.setOrder(child, 1)
  • Set in XML using the attribute order="1"
• flex-grow:
  • Set in JavaScript using the method flexbox.FlexboxLayout.setFlexGrow(child, 1)
  • Set in XML using the attribute flexGrow="1"
• flex-shrink:
  • 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: the shorthand proeprty has no alternative, 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 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%}