<Page xmlns="http://schemas.nativescript.org/tns.xsd" android:actionBarHidden="true" loaded="resetStyles">
    <GridLayout rows="200, *">
        <FlexboxLayout style="flex-wrap: wrap;">

            <Button text="r" tap="resetStyles" automationText="reset" />

            <!--container-->
            <Button text="f" tag="flex-flow: row-reverse wrap-reverse;" tap="flexFlow" automationText="flexFlow" />

            <!--items-->
            <Button text="o1" tag="#container { flex-wrap: wrap; } #itemRowReverse-0 { order: 0; } #itemRowReverse-1 { order: 2; }"                     tap="applyStyles" automationText="o1" />
            <Button text="g1" tag="#container { flex-wrap: wrap; } #itemColumnReverse-0 { flex-grow: 1; } #itemColumnReverse-1 { flex-grow: 1; }"       tap="applyStyles" automationText="g1" />
            <Button text="s1" tag="#container { flex-wrap: nowrap; } #itemColumnReverse-0 { flex-shrink: 0; } #itemColumnReverse-1 { flex-shrink: 0; }" tap="applyStyles" automationText="s1" />
            <Button text="a1" tag="#container { flex-wrap: nowrap; } .one { align-self: center; }"                                                      tap="applyStyles" automationText="a1" />

            <!--flex-->
            <Button text="f0" tag="#container { flex-wrap: nowrap; } #itemRowReverse-1 { flex: 0 1; } #itemColumn-1 { flex: 0 1; } #itemColumnReverse-1 { flex: 0 1; }" tap="applyStyles" automationText="f0" />
            <Button text="f1" tag="#container { flex-wrap: wrap; } #itemRowReverse-1 { flex: 3; } #itemColumn-1 { flex: 2; } #itemColumnReverse-1 { flex: 1; }"         tap="applyStyles" automationText="f1" />
            <Button text="f2" tag="#container { flex-wrap: nowrap; } #itemRowReverse-1 { flex: 3 0; } #itemColumn-1 { flex: 2 0; } #itemColumnReverse-1 { flex: 1 0; }" tap="applyStyles" automationText="f2" />

        </FlexboxLayout>

        <FlexboxLayout row="1" id="container" automationText="container">
            <Label text="row"            tap="select" backgroundColor="yellow"      automationText="itemRow-0" id="itemRow-0" class="zero" margin="10" />
            <Label text="row-reverse"    tap="select" backgroundColor="lightgreen"  automationText="itemRowReverse-0" id="itemRowReverse-0" class="zero" />
            <Label text="column"         tap="select" backgroundColor="lightblue"   automationText="itemColumn-0" id="itemColumn-0" class="zero" />
            <Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-0" id="itemColumnReverse-0" class="zero" />

            <Label text="row"            tap="select" backgroundColor="yellow"      automationText="itemRow-1" id="itemRow-1" class="one" />
            <Label text="row-reverse"    tap="select" backgroundColor="lightgreen"  automationText="itemRowReverse-1" id="itemRowReverse-1" class="one" />
            <Label text="column"         tap="select" backgroundColor="lightblue"   automationText="itemColumn-1" id="itemColumn-1" class="one" />
            <Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-1" id="itemColumnReverse-1" class="one" />

            <!--
            <Label text="row"            tap="select" backgroundColor="yellow"      automationText="itemRow-2" id="itemRow-2" class="two" />
            <Label text="row-reverse"    tap="select" backgroundColor="lightgreen"  automationText="itemRowReverse-2" id="itemRowReverse-2" class="two" />
            <Label text="column"         tap="select" backgroundColor="lightblue"   automationText="itemColumn-2" id="itemColumn-2" class="two" />
            <Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-2" id="itemColumnReverse-2" class="two" />
            -->

        </FlexboxLayout>
    </GridLayout>
</Page>
