Continuing where we left off. In this video, we will discuss Flexbox and how to apply it to our hero 1
section layout. Flexbox is a way to arrange and distribute content inside that box. 2
The Flex settings affect only the children of that Div Block and not the Div Block itself. So, in our case 3
those paragraphs. The container itself is unaffected. 4
The moment you select Flex layout, the new options will be displayed. 5
This is how we distribute children inside the Flexbox. 6
You'll recognize many of these symbols from Figma. 7
Here we have 4 different boxes inside a Flex container. 8
They have different heights. And they are aligned in the horizontal center. Next to the center alignment, 9
we have Start, which is same as top alignment in Figma. Then we have End, which is same as bottom alignment. 10
We have Stretch, which is going to stretch the heights from top to bottom edges. 11
This is usually the default alignment of a Flexbox. 12
Children are stretched across the height of the Flex container. 13
In this case, it's stretched to the tallest child, because that's what's defining the height of the parent 14
box. 15
You can see that orange box, is the tallest based on its 150-pixel minimum height. 16
If we increase or decrease it, the entire thing will change with it, until some other child is the tallest. 17
Then there is this baseline alignment. 18
This is something to do with text, 19
it's an invisible line on which characters are aligned. 20
I don't think I've ever had a need for this alignment. Underneath the Alignment option, 21
there is Justify, which is sort of like a vertical alignment and distribution option like in Figma. 22
There is center. 23
We have Space Between. And then we have Space Around, which is slightly different, 24
it adds even spacing around each box. On a hover 25
here are tool tips that explain what each option does. 26
So you can always get a help if you're lost. 27
These were all horizontal alignment options. 28
We also have an option to switch direction to Vertical. And then we have all the different vertical alignment 29
options. 30
As you'd expect, they work in the same way just different direction. 31
Justify option won't have any effects, in this case, because there is no extra space for them to distribute. 32
The parent container is wrapped tightly around the children. 33
The reason why there are gaps between them is because I have given margins to the boxes. 34
Without those margins, they will be fixed tightly together. 35
But if we increase the actual height of the parent container, then they will have more room. 36
What I love about web design is that it's like a puzzle. 37
Things often can act strangely and you're trying to figure out why and find a solution to a problem. 38
Quite satisfying when you do solve the puzzle. 39
But a big annoying head-scratcher, when you are staring at the screen trying to figure out what the heck 40
is going on. Another option on Flexbox is a reversal. 41
We can do that both, horizontally or vertically. To basically reverse the order. 42
Finally, we have an option to wrap. Wrapping means when there is no space 43
children will just jump to the next line. Wrapping only works if there is a necessity to push elements 44
on the next line. 45
If the elements have an option to shrink indefinitely, the necessity to wrap will never arise. 46
They will maintain on one line and shrink no matter how many of them you put inside. But if they have 47
some sort of minimum width that they can't go below, 48
then they will start jumping onto the next line. 49
What is happening here, is that first line tries to contain as many boxes as possible, until it can't 50
hold anymore. And sends extra boxes one by one to the next line. 51
If you click on one of the boxes, you'll see in the properties panel, special options for the Flex child. 52
This gives us even more fine-grained control over individual items inside the Flexbox. 53
But let's not worry about Flex child options for now. 54
Flexbox can be a little handful to understand in one go. 55
So don't worry if you feel a little confused, or not understanding exactly, or not following every single 56
layout option that I have covered right now. 57
Once you start building in and playing around with it, then you'll get a hang of it. In one of the assignments, 58
after this, I have put a Flexbox game. Which is a sort of a puzzle game built inside Webflow by 59
Webflow team. And it's a great Flexbox exercise and a great way to practice Flexbox and a different 60
alignment options. 61
So let's go back to our hero section and see how we can use Flexbox. In our case, it's pretty simple 62
actually. 63
We just have 2 blocks, left and right. 64
We can apply Flex layout to the container, 65
but remember, we made this container to be a standard container throughout our page, even for non-flex 66
items. So we don't want to mess with it. 67
We can simply add... 68
Yep, you guessed it. Another box. Drop those left and right blocks inside and apply flex layout to that. 69
It's in an opposite direction. 70
We can, of course, reverse this using flex box option, but we should instead arrange them correctly inside 71
the navigator. 72
Just drag one on top of the other. 73
Now we have our flex option, so we can align these blocks as we want. Horizontal direction is exactly 74
what we want, so we keep it there. And then centre alignment and pushing them to the edges, 75
is going to look just spot on. 76
In Figma, 77
we have content sitting a little higher. 78
We can achieve this, by adding a button margin on the left block. 79
This will push the content up. 80
Let's check this on a smaller screen. 81
There are 2 things that need some styling. 82
First, the left content is a little messy. 83
Buttons got all screwed up. 84
That's because there is not enough space on one line. And the second button jumps below. 85
And I don't like how headline looks on 3 lines. 86
It looks like it's giving us a finger. 87
We can easily fix this by giving the left block minimum width. Then it's not going to shrink to a point 88
where this needs to happen. 400 pixels looks like a good idea. 89
Now the left block doesn't shrink beyond that point. 90
And if there is not enough space, the image is going to take the hit. Second bit, is that they are a bit 91
too close to each other. 92
We can add an extra margin to the left block, so it pushes the image away. 93
That looks quite good. 94
Tablet and mobile screens are a little more messy, but we will take care of those in mobile optimization 95
lessons. 96
All right. 97
This looks just the way we want it to be. 98
Yes, the image has a little different dimensions, compared to Figma design, but that's expected. 99
We are making things responsive, so it shrinks and adjusts to the screen sizes. 100
So to recap, Flexbox is what it says - flexible box. It can distribute children elements either in vertical 101
or horizontal direction. 102
Once you set display flax on an element, alignment and justification options show up. Nailing down 103
the right options from here is a matter of trial and error. 104
Just play around with all of the options until you find the right layout for you.