Alright, let's get started and learn more about smarter. And Cosmos models is one of the best ways in modern web to build websites. Let's get started from Sr. Before Flexbox Sri, what we have on the four major layout modes, set of rules that determine the size and position of boxes based on their relationship with their cell phones and ancestor boxes, and we have block layouts in line layouts, table layouts and positioning. Our book layout was created for displaying blogs on web pages. Line layout was created for displaying and styling text. Table layout was created for splaying CG data, at sur pages and like financial information or data from spreadsheets, positions layout was designed for creating complex layouts when you want to change logic or my blog said display it on a page without changing the HTML on the by CSS, for example, like you can from block on the bottom of your page, but you want to display it on the top of your page.

Okay, so Flexbox is actually main idea to provide more flexible way to create complex layouts or vacations and pages. And it's created, we're in a very clear way, you know, dissolve, you can align items or Change space between items results, like a lot of fans as content developers before. And so we use two main terms here, like Xbox container, and flex items. So items, limit flex items because they're flexible, and they can change the order or logical appearance on the web page. And so we have some rules that's only related to our parents. So Flexbox container and some of those we have latest only two flex items.

Flex box is set of CSS rules. And so it has a some here and there regular CSS blog, so use only two direction like walk And England direction whilst the boxes based on the own directions and from the beginning it's maybe we're complicated so understand how items displaying on their webpage and I'm advising you to Google flex box excess image and keep it smile you'll learn more about CSS rules, because it will help you a lot. And as you can see here on the symmetrical flex container without flexible items, and two major sins here is main axis and cross axis. When x is started from main start points and as on Main and point, cross axes, start from the start and end at cross and actually man axis is our primary line and in defiance ever since So it defines flex direction. And it's on our example on this image is horizontal, but it can change the direction based on sections that you add to your container.

And so, cross axis is actually always related to mine access and this is a perpendicular line. So that axis Okay, I think it's pretty enough for this exam. Have a nice day. Bye bye.