1
00:00:00,860 --> 00:00:03,120
Now, when should you use flex box?

2
00:00:03,720 --> 00:00:07,160
Personally, I would like to use Flex Fox for a few main things.

3
00:00:07,850 --> 00:00:14,300
For example, scaling vertical and horizontal alignment and reordering elements within a container.

4
00:00:14,660 --> 00:00:19,230
These are best use on page components within a parent element.

5
00:00:19,430 --> 00:00:24,170
There are plenty of other uses for flex box, like changing the direction of the column.

6
00:00:24,170 --> 00:00:30,680
Ororo, but honestly, I prefer to use milkweeds and percentage base width for creating columns and

7
00:00:30,680 --> 00:00:31,070
rows.

8
00:00:31,730 --> 00:00:37,160
Some best practices for using flex box hours following for navigations.

9
00:00:37,670 --> 00:00:44,450
A common pattern for navigation is to have a common pattern for navigations is to have a list of items

10
00:00:44,450 --> 00:00:46,130
displayed as horizontal bars.

11
00:00:46,280 --> 00:00:50,840
This pattern, as basic as it seems, was difficult to achieve before flex box.

12
00:00:50,840 --> 00:00:57,080
It forms the most simple of flex box examples and could be considered the ideal flex box use case.

13
00:00:59,890 --> 00:01:07,120
We also have split navigations, another way to align items on the main axis is to use all the margin.

14
00:01:08,100 --> 00:01:14,730
This enables the design pattern of navigation bar, where one group of items are aligned to the left

15
00:01:14,730 --> 00:01:17,130
and the other group is aligned to the right side.

16
00:01:20,370 --> 00:01:27,480
Centering an item now, believe it or not, but before flexibles developers would joke that the hardest

17
00:01:27,480 --> 00:01:30,410
problem in Web design was vertical centering.

18
00:01:30,660 --> 00:01:37,230
This has now been made straightforward, using the alignment properties in box, as you would now just

19
00:01:37,380 --> 00:01:42,150
display as flex, then a line item recentre and then justify content recentre.

20
00:01:44,420 --> 00:01:48,920
Also, some pesky case uses are for car layouts and media objects.

21
00:01:49,880 --> 00:01:58,340
And last but not least, form controls for us is particularly useful when it comes to styling form controls,

22
00:01:58,820 --> 00:02:05,630
forms have a lot of makeup and a lot of small elements that we typically want to align with each other.

23
00:02:06,110 --> 00:02:12,320
A common pattern is to have a input element paired with a button, perhaps for a search form, or whether

24
00:02:12,320 --> 00:02:16,340
you simply want your visitor to enter an e-mail address.

25
00:02:17,550 --> 00:02:24,840
So in conclusion, whether you choose to use flexibles or not in your designs, always think about the

26
00:02:24,840 --> 00:02:32,310
best way to present the content that you have and then see how flexibles or other layout methods can

27
00:02:32,310 --> 00:02:34,050
help you achieve it.

28
00:02:34,440 --> 00:02:35,880
OK, so thank you very much.