Name: Create Flex Based Containers Using FlexboxLayout
Uploaded: 2017-02-21T21:54:39-06:00
Description: Use the FlexboxLayout component to create a layout container that is based on the CSS flexbox-layout in modern browsers. We will examine several of the properties, behaviors, and benefits that the FlexboxLayout provides with native mobile UI layouts in a NativeScript app.

Create Vertical/Horizontal Layouts with StackLayout 

Create an Absolute Positioned Layout Using AbsoluteLayout 

Add Responsive Wrapping Using WrapLayout

Position Views in a Dock Using DockLayout

Make a Grid Layout Using GridLayouts 

Create Flex Based Containers Using FlexboxLayout

Build Basic NativeScript App Templates

Use the FlexboxLayout component to create a layout container that is based on the CSS flexbox-layout in modern browsers. We will examine several of the properties, behaviors, and benefits that the FlexboxLayout provides with native mobile UI layouts in a NativeScript app.

https://app.egghead.io/api/v1/lessons/nativescript-create-flex-based-containers-using-flexboxlayout/subtitles

[00:00] Start by adding the Flexbox layout to our page. Inside of the Flexbox layout, we'll add a few view components to fill it out so we can see how the layout will arrange the child items. We'll also add some color inline for the visual effect, to keep track of the buttons.

[00:38] With the two buttons inside of the Flexbox layout, we're going to use the order property to specify the order that these items will render. We're going to flip these so the first button here will be second, and the second button is going to be number one.

[00:54] When we run this, the button "Hello" should be on the right, and the button with "Goodbye" will be on the left. There you see they switched. Let's get these back in order. Run that, and you'll see they'll switch again.

[01:09] For the Flexbox layout, there are several properties that you can use to adjust the alignment and the layout of the child items. We'll start with the align-items property. We're going to set this to flex-start, which will position the view components at the top -- there, you see.

[01:31] There's also the flex-end, which will position them at the bottom or the end of the Flexbox layout. We also have the justify-content property, which you can set to space-between to add padding between the view components inside of the layout. There, you see the buttons now have padding.

[01:52] You have space-around, which will give padding on all sides of the view components. Then there's center. This is very similar to the web on using Flexbox layout. Here you go. They're centered, and the align-items use flex-end. Let's go ahead and push this to center also.

[02:13] The items will appear in the center of the Flexbox layout due to the align-items and justify-content properties being set to center. Let's add two more view components here. We're using buttons, and we'll set the background color inline here. We are going to also set a height.

[02:44] We'll vary these on each of the buttons so we can see how the items will be positioned in the screen space they will consume. We'll run this, and the buttons will be varying in heights. You'll see here there's "Hello", "Egghead", and "Goodbye". You can't really see the "Egghead" text. Let's set the color to white to make that more visible.

[03:07] There is also the align-content property that you can use on the Flexbox layout. You can set this to flex-start. If you're going to use this, I would typically get rid of the align-items. Run this, and now you see they're flex-start on the align-content.

[03:28] You start at the top, they're justified in the center, but they're also going to span because they're set with the align-content and not the items. Here, if you added the line items and set that to center, run this, and you see now they're back in the center, which ignores the align-content property.

[03:53] You can try various values to get different outputs, but we'll keep it simple here. We'll go back to flex-end and see exactly what happens. Now they're at the end, and again, align-content is being ignored because we're setting the items alignment and we also have the justify-content still set to center.

[04:15] The good thing about NativeScript is you can also set this with CSS. You don't necessarily have to inline these properties. Let's go ahead and say class=main-container with the CSS class set to main-container.

[04:33] We'll define it inside of app.css. We'll open main-container. We're going to use the align-items property, and set it to center. We'll use justified-content, and we'll set it to space-between.

[04:53] You run this, and you'll see the space-between added a little bit more padding. Let's go ahead and say flex-start to see the real effect here. Now the items are aligned using flex-start, and they're justified with space-between using CSS specified by the class property on the layout.

Create Flex Based Containers Using FlexboxLayout

Share this video with your friends

Course

Build Basic NativeScript App Templates