0
1
00:00:00,180 --> 00:00:06,720
Continuing where we left off. In this video, we will discuss Flexbox and how to apply it to our hero
1

2
00:00:06,720 --> 00:00:12,300
section layout. Flexbox is a way to arrange and distribute content inside that box.
2

3
00:00:12,300 --> 00:00:18,780
The Flex settings affect only the children of that Div Block and not the Div Block itself. So, in our case
3

4
00:00:18,810 --> 00:00:22,230
those paragraphs. The container itself is unaffected.
4

5
00:00:22,230 --> 00:00:26,310
The moment you select Flex layout, the new options will be displayed.
5

6
00:00:26,310 --> 00:00:29,490
This is how we distribute children inside the Flexbox.
6

7
00:00:29,490 --> 00:00:33,390
You'll recognize many of these symbols from Figma.
7

8
00:00:33,430 --> 00:00:37,010
Here we have 4 different boxes inside a Flex container.
8

9
00:00:37,120 --> 00:00:44,290
They have different heights. And they are aligned in the horizontal center. Next to the center alignment,
9

10
00:00:44,290 --> 00:00:52,550
we have Start, which is same as top alignment in Figma. Then we have End, which is same as bottom alignment.
10

11
00:00:52,550 --> 00:00:59,590
We have Stretch, which is going to stretch the heights from top to bottom edges.
11

12
00:00:59,600 --> 00:01:02,730
This is usually the default alignment of a Flexbox.
12

13
00:01:02,750 --> 00:01:06,560
Children are stretched across the height of the Flex container.
13

14
00:01:06,560 --> 00:01:11,660
In this case, it's stretched to the tallest child, because that's what's defining the height of the parent
14

15
00:01:11,660 --> 00:01:12,490
box.
15

16
00:01:12,500 --> 00:01:18,430
You can see that orange box, is the tallest based on its 150-pixel minimum height.
16

17
00:01:18,470 --> 00:01:29,290
If we increase or decrease it, the entire thing will change with it, until some other child is the tallest.
17

18
00:01:29,370 --> 00:01:31,380
Then there is this baseline alignment.
18

19
00:01:31,380 --> 00:01:32,900
This is something to do with text,
19

20
00:01:32,910 --> 00:01:36,100
it's an invisible line on which characters are aligned.
20

21
00:01:36,120 --> 00:01:40,250
I don't think I've ever had a need for this alignment. Underneath the Alignment option,
21

22
00:01:40,260 --> 00:01:45,540
there is Justify, which is sort of like a vertical alignment and distribution option like in Figma.
22

23
00:01:46,470 --> 00:01:47,440
There is center.
23

24
00:01:51,990 --> 00:01:57,020
We have Space Between. And then we have Space Around, which is slightly different,
24

25
00:01:57,080 --> 00:02:01,490
it adds even spacing around each box. On a hover
25

26
00:02:01,490 --> 00:02:04,130
here are tool tips that explain what each option does.
26

27
00:02:04,130 --> 00:02:06,620
So you can always get a help if you're lost.
27

28
00:02:06,620 --> 00:02:09,560
These were all horizontal alignment options.
28

29
00:02:09,560 --> 00:02:15,830
We also have an option to switch direction to Vertical. And then we have all the different vertical alignment
29

30
00:02:15,830 --> 00:02:16,700
options.
30

31
00:02:16,700 --> 00:02:20,060
As you'd expect, they work in the same way just different direction.
31

32
00:02:23,850 --> 00:02:29,490
Justify option won't have any effects, in this case, because there is no extra space for them to distribute.
32

33
00:02:30,030 --> 00:02:33,370
The parent container is wrapped tightly around the children.
33

34
00:02:33,390 --> 00:02:38,310
The reason why there are gaps between them is because I have given margins to the boxes.
34

35
00:02:38,400 --> 00:02:41,390
Without those margins, they will be fixed tightly together.
35

36
00:02:41,460 --> 00:02:46,370
But if we increase the actual height of the parent container, then they will have more room.
36

37
00:02:46,720 --> 00:02:49,080
What I love about web design is that it's like a puzzle.
37

38
00:02:49,080 --> 00:02:54,480
Things often can act strangely and you're trying to figure out why and find a solution to a problem.
38

39
00:02:54,570 --> 00:02:56,610
Quite satisfying when you do solve the puzzle.
39

40
00:02:56,630 --> 00:03:01,830
But a big annoying head-scratcher, when you are staring at the screen trying to figure out what the heck
40

41
00:03:01,830 --> 00:03:05,330
is going on. Another option on Flexbox is a reversal.
41

42
00:03:05,340 --> 00:03:11,670
We can do that both, horizontally or vertically. To basically reverse the order.
42

43
00:03:11,670 --> 00:03:15,390
Finally, we have an option to wrap. Wrapping means when there is no space
43

44
00:03:15,390 --> 00:03:21,420
children will just jump to the next line. Wrapping only works if there is a necessity to push elements
44

45
00:03:21,420 --> 00:03:22,590
on the next line.
45

46
00:03:22,590 --> 00:03:27,960
If the elements have an option to shrink indefinitely, the necessity to wrap will never arise.
46

47
00:03:27,990 --> 00:03:33,780
They will maintain on one line and shrink no matter how many of them you put inside. But if they have
47

48
00:03:33,780 --> 00:03:37,260
some sort of minimum width that they can't go below,
48

49
00:03:37,260 --> 00:03:39,700
then they will start jumping onto the next line.
49

50
00:03:39,750 --> 00:03:45,690
What is happening here, is that first line tries to contain as many boxes as possible, until it can't
50

51
00:03:45,690 --> 00:03:49,910
hold anymore. And sends extra boxes one by one to the next line.
51

52
00:03:52,500 --> 00:03:58,440
If you click on one of the boxes, you'll see in the properties panel, special options for the Flex child.
52

53
00:03:58,440 --> 00:04:03,650
This gives us even more fine-grained control over individual items inside the Flexbox.
53

54
00:04:03,690 --> 00:04:06,470
But let's not worry about Flex child options for now.
54

55
00:04:06,630 --> 00:04:10,170
Flexbox can be a little handful to understand in one go.
55

56
00:04:10,410 --> 00:04:16,440
So don't worry if you feel a little confused, or not understanding exactly, or not following every single
56

57
00:04:17,010 --> 00:04:18,990
layout option that I have covered right now.
57

58
00:04:19,050 --> 00:04:23,850
Once you start building in and playing around with it, then you'll get a hang of it. In one of the assignments,
58

59
00:04:23,850 --> 00:04:31,080
after this, I have put a Flexbox game. Which is a sort of a puzzle game built inside Webflow by
59

60
00:04:31,350 --> 00:04:38,880
Webflow team. And it's a great Flexbox exercise and a great way to practice Flexbox and a different
60

61
00:04:38,910 --> 00:04:39,970
alignment options.
61

62
00:04:39,990 --> 00:04:44,910
So let's go back to our hero section and see how we can use Flexbox. In our case, it's pretty simple
62

63
00:04:44,910 --> 00:04:45,520
actually.
63

64
00:04:45,540 --> 00:04:47,780
We just have 2 blocks, left and right.
64

65
00:04:47,820 --> 00:04:50,220
We can apply Flex layout to the container,
65

66
00:04:50,280 --> 00:04:56,610
but remember, we made this container to be a standard container throughout our page, even for non-flex
66

67
00:04:56,610 --> 00:04:58,730
items. So we don't want to mess with it.
67

68
00:04:58,770 --> 00:04:59,910
We can simply add...
68

69
00:05:00,270 --> 00:05:07,460
Yep, you guessed it. Another box. Drop those left and right blocks inside and apply flex layout to that.
69

70
00:05:18,490 --> 00:05:19,970
It's in an opposite direction.
70

71
00:05:19,990 --> 00:05:25,510
We can, of course, reverse this using flex box option, but we should instead arrange them correctly inside
71

72
00:05:25,510 --> 00:05:26,610
the navigator.
72

73
00:05:26,680 --> 00:05:28,930
Just drag one on top of the other.
73

74
00:05:28,930 --> 00:05:34,840
Now we have our flex option, so we can align these blocks as we want. Horizontal direction is exactly
74

75
00:05:34,870 --> 00:05:39,310
what we want, so we keep it there. And then centre alignment and pushing them to the edges,
75

76
00:05:39,310 --> 00:05:40,950
is going to look just spot on.
76

77
00:05:53,420 --> 00:05:54,020
In Figma,
77

78
00:05:54,020 --> 00:05:56,550
we have content sitting a little higher.
78

79
00:05:56,930 --> 00:06:00,610
We can achieve this, by adding a button margin on the left block.
79

80
00:06:00,620 --> 00:06:08,010
This will push the content up.
80

81
00:06:08,040 --> 00:06:10,230
Let's check this on a smaller screen.
81

82
00:06:10,260 --> 00:06:12,330
There are 2 things that need some styling.
82

83
00:06:12,330 --> 00:06:14,850
First, the left content is a little messy.
83

84
00:06:14,850 --> 00:06:16,080
Buttons got all screwed up.
84

85
00:06:16,320 --> 00:06:20,840
That's because there is not enough space on one line. And the second button jumps below.
85

86
00:06:21,040 --> 00:06:23,660
And I don't like how headline looks on 3 lines.
86

87
00:06:23,670 --> 00:06:25,590
It looks like it's giving us a finger.
87

88
00:06:26,100 --> 00:06:31,950
We can easily fix this by giving the left block minimum width. Then it's not going to shrink to a point
88

89
00:06:31,950 --> 00:06:36,170
where this needs to happen. 400 pixels looks like a good idea.
89

90
00:06:36,180 --> 00:06:38,740
Now the left block doesn't shrink beyond that point.
90

91
00:06:38,910 --> 00:06:44,130
And if there is not enough space, the image is going to take the hit. Second bit, is that they are a bit
91

92
00:06:44,130 --> 00:06:45,500
too close to each other.
92

93
00:06:45,660 --> 00:06:53,610
We can add an extra margin to the left block, so it pushes the image away.
93

94
00:06:53,890 --> 00:06:55,000
That looks quite good.
94

95
00:06:58,370 --> 00:07:03,710
Tablet and mobile screens are a little more messy, but we will take care of those in mobile optimization
95

96
00:07:03,710 --> 00:07:04,620
lessons.
96

97
00:07:04,630 --> 00:07:05,020
All right.
97

98
00:07:05,030 --> 00:07:07,110
This looks just the way we want it to be.
98

99
00:07:07,130 --> 00:07:12,010
Yes, the image has a little different dimensions, compared to Figma design, but that's expected.
99

100
00:07:12,110 --> 00:07:16,470
We are making things responsive, so it shrinks and adjusts to the screen sizes.
100

101
00:07:16,490 --> 00:07:22,640
So to recap, Flexbox is what it says - flexible box. It can distribute children elements either in vertical
101

102
00:07:22,670 --> 00:07:24,320
or horizontal direction.
102

103
00:07:24,350 --> 00:07:30,920
Once you set display flax on an element, alignment and justification options show up. Nailing down
103

104
00:07:30,920 --> 00:07:34,300
the right options from here is a matter of trial and error.
104

105
00:07:34,310 --> 00:07:38,560
Just play around with all of the options until you find the right layout for you.