If you have ever built a web page from scratch, you probably know that it can be tricky to get items on the page to go exactly where you want them to. Flex Columns and Flex Rows in Apex Designer make laying out your pages fast and easy. They also give you control over scrolling of overflowing content, so you can get your pages looking just so. In this video, David Knapp takes us through basic use of Flex Row and Flex Column.
Video Transcript
Hi, this is Dave from Apex and I want to show you some cool new components and attribute directives that can make it really easy to control layout of your page. What you're seeing on the screen is a little demonstration app that I put together. It has a homepage that we're on and there are three demo items in it. The demo items are simply to give you an idea of the space that is available for those. So you can see each of these items starts at the top and is just stacked up one on top of another. No gaps in between them. So that's one of the failure modes is often what you want to do is have a bunch of items on the page, but have a small amount of controlled space between them.
The other failure mode is lists - let's say that we went in here and made this 20 or 40 items. Now when we see what happens, the whole page is taller than what will actually fit on the screen. And so when we scroll down the list, the item one and two go off the top. And so that's the second failure mode of not having any kind of flex layout here.
So let's show you the first pattern. The first pattern is that you can add at the top of your page, a Flex Column. And a Flex Column has a gap and then we can drag these items in so they'll be stacked like they were before, but you notice now they have a nice gap of 20 pixels between them and you could mess around with that. Maybe we wanted this to be only 10 or we wanted it to be 20, but you see that the page still is very tall and scrolls off. That's because we have not yet said each of these items right now are taking their natural height, but we can go in here on this one, add in an attribute called grow, which makes this item fit the height of the available space.
So you notice the scroll bar went away, but the problem is we need a scroll bar in order to scroll, but we wanted to scroll just these items and we can do that by adding the scroll property onto here. So now what we see is that the Flex Column, the item three, the height has grown to take the available space and for the overflow it's allowed to be scrolled. So that's the first basic pattern using a Flex Column to give you gaps in between items as well as being able to control the height of individual items within that.
Now that's vertical. Let's talk about horizontal. Let's say we wanted item one and item two to be in a single row at the top of the page. We can, as you probably have guessed, go in here, add before a Flex Row, and then we will drag the first two items into that Flex Row. And there they are. Now they're in a row, but it's a little bit weird. They used to be the full width, but now they're only their natural width. Just big enough to contain the text. Item one and item two, as you may guess, you can go in here and put on the grow attribute. So now that item grows. Item two doesn't have the grow attribute yet, so it's taking up its natural size. So let's go add the grow attribute onto that as well. So there we are. We have two items. They are inside of a Flex Row. We have the same kind of capability here. We could make that gap much smaller or we could put it back to 20 again or take it off altogether.
A couple of other things. Let's say that one of these two is a little bit taller than the other. So let's go put two items on here. So now you can see that item one has a natural height based on the text that's inside of it. And item two is the same. But let's say you wanted to align these differently, you could actually come in here and click on center vertical and that would align all of the items centrally.
Now let's continue on with this case. So far we've just had a Flex Column and a Flex Row, but we actually can use these nested again. So let's say we want item three to be the left half and we want to add an item four over here. We can put those inside of a Flex Row, move that one in there, and we can add another demo item here, which will come in as well. It should have come in as four, but it came in as three. So we'll just fix that up. We'll put grow on this one as well. Cool. Now we can see that those two items are each taking up their respective space. This looks a little strange where the dotted line is to the left of the scroll bar, but users won't notice that because you don't normally have background color and dotted lines next to your components like that.
So now we also noticed that there's a little bit of strangeness going on here. Maybe what we need to do is double check does this Flex Row have a grow and it does not. So let's go ahead and put grow on there. Yeah. Now we see that the item on the top, it's not squeezed, it's properly reserving its space, but let's continue this. So now we have a Flex Column with a Flex Row for the top. And here, let's say we wanted to put a heading above this and still have it scroll within that. We can do that, as you may have guessed, by adding on a Flex Column within that. And then moving these two items are moving that item inside. And let's add before this a heading 2, "stuff on the left".
And you see that this seems to be taking its natural width. So if we click on here, Flex Column of course has the grow button. There we go. Now we've got the right width, and if we click out of here, we can see that we can scroll the stuff on the left properly. And when we scroll it all the way down, you can see the dotted lines just at the very bottom of the page. So continuing that on, we can do the same thing here. We'll add before another Flex Column. We will give that grow. We'll put the demo item inside of it and we'll add before this, the heading two, and we'll put stuff on the right.
So there we go. So that's a quick introduction to several different pieces that can be assembled to make the page layouts be the way you want them:
- Flex Column It's very standard to use a flex column in every page
- Flex Row to align any things that you want in horizontal rows
- You can nest a Flex Column and put other items and other Flex Rows inside of it
So I hope you enjoyed that. And if you have any ideas on how to simplify this stuff further, just let us know. We look forward to your feedback.
