Web Development Masterclass: Learn HTML, CSS Flexbox, Bootstrap for Responsive Web Design | Luis Carlos | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Development Masterclass: Learn HTML, CSS Flexbox, Bootstrap for Responsive Web Design

teacher avatar Luis Carlos, Engineer, Web Developer and Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

41 Lessons (2h 15m)
    • 1. Course presentation

    • 2. Introduction

    • 3. Flexbox layout model

    • 4. Flexbox properties

    • 5. Display property

    • 6. Flexbox default behavior

    • 7. Flexbox direction

    • 8. Flex wrap

    • 9. Flex flow

    • 10. Justify content

    • 11. Align items

    • 12. Align content

    • 13. Order property

    • 14. Flex grow

    • 15. Flex shrink

    • 16. Flex basis

    • 17. Flex

    • 18. Align self

    • 19. Holy Grail layout introdution

    • 20. Holy Grail layout - 1st method

    • 21. Holy Grail layout - 2nd method

    • 22. Holy Grail layout - create header content

    • 23. Holy Grail layout - create navigation links

    • 24. Holy Grail layout - create main content

    • 25. Holy Grail layout - create aside content

    • 26. Holy Grail layout - create footer content

    • 27. Advanced layout technique - part 1

    • 28. Advanced layout technique - part 2 (Holy Grail layout)

    • 29. Introduction to Media Queries

    • 30. Make your Webpage with Responsive Layout (Holy Grail Layout)

    • 31. Responsive Design without Media Queries (With Flex-Wrap)

    • 32. Bootstrap flex intro

    • 33. Bootstrap - Display utility classes and use of breakpoints

    • 34. Bootstrap - Direction utility classes

    • 35. Bootstrap - Flex wrap utility classes

    • 36. Bootstrap - Justify content utility classes

    • 37. Bootstrap - Align item utility classes

    • 38. Bootstrap - Align content utility classes

    • 39. Bootstrap - Align self utility classes

    • 40. Bootstrap - Flex Grow & Shrink utility classes

    • 41. Bootstrap - Order utility classes

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Are you a  looking for a web development class that helps you to build a modern website with responsive design in the easiest and most efficient way? 

If your answer is  yes, you're in the right place. Here you will learn how to build responsive and modern websites using the flexbox layout model.

My name is Luis Carlos, im an enginner & a web developer, and I will be your guide in the next hours for this class. I have several years of experience as a trainer and I will share all my knowledge in the area of web development.


Why Flexbox?

Flexbox simplifies complexity.

With Flexbox you will be able to do more with layouts, and  allow you to reach the complex layout in an easier  and fun way writing less code & clean code to create them.


What you will learn and be able to do at the end?

  • CSS3 properties for parents (container) and childrens (flex items) using
  • Align and position flex items
  • Arrange items in different directions and orders
  • Fill the remaining space and shrink elements to not overflow
  • Create a responsive layout with the respective content
  • Advanced layout techniques
  • Use of media queries to create responsible sites
  • Apply Flexbox model using Bootstrap

How is the course structured?

The course is structured in several sections where the first part is dedicated to the properties used for creating websites using the flexbox model. After properties I will guide you to a real webpage, where i create the holy grail layout using 2 methods, one where we use only one dimension layout and later the same layout will be done in two dimensions using nested containers.

With the main layout finished it will  be added the content in order to understand how the flexbox will position and align all the content of the page.

After create the first real webpage, it's time to learn advanced techniques to create layouts, where you can check the great dynamic and versatility of the flexbox model.

At this point you are already able to build websites, and only need to adapt your website to all types of devices, which is why you learn  to use media queries in site creation. 

The course has some documents available that you can follow and can work as your guide, where it is possible to verify the planning and details that I outlined for the creation of the webpage and some details in the layouts that i create.

Target Students

This course is intended for people who work in the area of ​​web development with knowledge of HTML and CSS or any person with an interest in this area

At the end feel free to leave a comment!

Join me in this challenge and see how easy and fun is to learn flexbox!

If you want to learn more in the web development area, you can watch my other courses:

Meet Your Teacher

Teacher Profile Image

Luis Carlos

Engineer, Web Developer and Instructor


Currently, I am an exciting Engineer and Trainer , who loves to learn and share knowledge and new experiences.

As Trainer participated in many projects directed to student in the areas of math, computer science, new technologies and web development . Several years of training helped me developed many skills that contribute to the personal development of each people.

You can follow some of my articles in my website where i share some tutorials in the area of new technologies.

Follow me on Skillshare!




See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Course presentation: Hello and welcome to the CSS three flex box Curse, where we're not to create mother and responsive websites using the flex box layout model. My name is Wish Carhenge, and that will be our guide in the next few hours. So let's start with Chris content in Discuss. You will dive into the world of flex box model. Flex Box appears inversion Treat off CSS and simplifies well the evolution off modern Web design, allowing to build naturally and efficiently responsively outs adaptable to all kinds of devices. So forget the old methods using floats and position workarounds. Using simple properties, you can easily feel spices in a webpage are just shrink element size to prevent overflow. Other great feature is the ability to manage the size of an element group and changing their ardor after knowing the properties. It's time to create a completely out with a responsive content in order to put into practice what students learned previously. And I will share some events techniques for creating Web pages that you can apply to your own projects. The use of media queries takes an important role in responsively outs. You will learn to apply them to create different styles, depending the devices that are used building a responsive design for your websites. Besides media queries, you will see that using the correct flex box properties, you can also f a responsive layout. So at the end of the curse, you are able to create your own amazing and gorgeous responsive websites. Using the flex box model discourse is intended for people want to learn the best trending and modern Web technologies that help you to do more with less, come and can be applied to any project in real world. Join me in this challenge and see how easy and fan it's learned Flex box. 2. Introduction: we technological evolution we chairs occurred in the last decades. New types of mobile devices have emerging log with the needs and demands off the users nowadays, even having computers, people prefer to consume and create content through the smartphone and tablet, which, in combination with growth strategies by companies, brings I level of demand where only those who were there to the changes can win. It's seared that the concept of responsive website arises that allows Web contents to be adjusted according to the devices that are being used to visualize them. Does adjusting the layout to the device When you provide intuitive and easy access, the consumer browsers sites with more satisfaction. The quality off interaction that customers have with companies website is very important because it reflects companies concern to be able to provide good services. There's rising its image in front of competitors about the user experience may be enough for a company to decrease. It sells and files each strategy. The development of websites plays a fundamental role in the creation of functional pages adaptable to old type of devices, and this is where the concept of flex books applies. Prior to flex box, come on websites. Layouts using HTML and CSS were often difficult to achieve due to limitations off layout models. Website layouts were often achieved using a combination off floated and position it elements factors that brought I complexity in the creation of the pages. The C. S s flexible box layout was developed by the CSS Working Group to provide the box model that could over candles issues. Flex Box is a layout model these liken to help where altars to create advance website layouts that are difficult to achieve using other layout. Mel's providing a more efficient way to lay out a line and distribute space among items in the container even when they're size is unknown. Reason why word flexed is used. It's red for mobile screens and responsive content for dynamically outs. And Web Epps discourse will cover the fundamental properties off CSS Flex box model and some helpful resources for digging deeper into the topic. 3. Flexbox layout model: hello and welcome again In this new video, I'm going to take an initial approach on flex box layout model. The men idea behind this new model is to give a container the ability to change its items within died values to Westfield. Available spice and adept toe all kind off display devices and screen sizes, a flex container expense items or shrinks them to prevent overflow. Other great feature is to change the order off the different flex items off the page, making easy to change the position off the page contents, which did not happen when using floats. Where was sometimes of a problem. Changing the layout and the death toll kind of devices using this new layout model called is more readable, and that is much easier to maintain in resume flex box use properties that can completely change the dynamic over our sightly out. And he sees the big advantage when compared with older models with CSS. Since flex boxes entire model and not a single property, it involves a lot of things, including its old set off powerful properties. Like I said previously, some of them are meant to be set on the container are parent elements known as flex container, while the others are meant to be set on the Children that we call. Flex items, if regularly out, is based on both block and in line flow directions. Deflects layout is based on flex flow directions. In this image, you see the main idea behind the flex layout, where you can distinguish the flex container and deflects items that are inserting sides. Let's learn now some terminology used to describe the flex container, and it's Children's. Each flex container contains two exes. Domain access is the primary exes, along which flex items are laid out and the cross axis is perpendicular to the main axis. It's direction depends on the main excess direction. Dumaine start and maintain end and across start and cross end sides off. The flex container describes the origin and end off the flow off flex items. They followed the main access and cross access off. The flex container deflects items, agnostic equivalents off. I tend with our main size and cross size, which respectively follows the main excess and cross excess off the flex container. We have now our model bills. See you next lesson 4. Flexbox properties: Hello. It's time to learn the flex box properties. Flex Box models consists of some flex properties as well as a will bench off alignment properties. As you will see in the next videos. Alignment is a big part. Off flag spots basically deflects box properties define our flicks. Items are sized, all they wrap and which direction they go in. In the alignment, properties are defined out. The flex items are align boat horizontally and vertically within their container. These properties can be divided into groups, properties for parents that use values to controlled inner items and F Children properties to find. To delay out, you can see in the list all the properties that you will learn in the next videos. Seven properties for the parents, the display property, flex that action flex rep. Flex flow, just defined content, align items and aligned contents and six properties for the flex items are the property flex, grow, flex bases, flex, drink, flex and a line self. The next videos off. The girls will be dedicated to these properties. Things 5. Display property: Hello and welcome again to a new video. Let's start now with the properties use in flex spots For our parents, the flex container, the first parent property and the most important is the display. Because without this property, flexible box model can be applied. This parent property defines a flex container block, are in line depending to giving value to the property and enables a flex context to the direct Children's known as flex items. A flex container is declared by setting the display Property, often element to flex to display as a flex luck element, are in line flex to display as a flex in line elements. For these first example, I want that my page. If a thief identified with the I d container, that will be my flex container. And inside the container, I have my main dif that receives text debt work as flex item. This is the only cold that I need inside my body Tech to create a container and the flex item. Now I write my CSS cold inside the style tech to wait it delay out off the page. The diff container will be my flex container and the main dif deflects item. Like I said previously, if I want to add more flex items, just need to add new thieves inside the container like I did with the main Dave. Inside the style tech I create now the style rule for my flex container, where I put the display property with value flex to display container as a block element and give value purple to the background color. Finally, I defined the ICT off the container with the Valley off 200 pixels. Domain def is the direct Children and is our flex item, where I defined the background color. Burley was, and finally at bedding and margin value with 20 pixels and the barter with one pixel off with style solid and color dark orange as expectable. The container is displayed as a block element with background purple, and you see that the main dif adjust the size to do content that is inside. That is, one off the important default drivers for the flex items, using the flex box to change the container to a knee in line element. I just need to change the value Flex two In Line Flex and now in our page, the container is not displayed as a block and adjust its size to the main def. So don't forget these two important values for display property flex to create a block element and in line flex to display a flex in line elements. Thanks for following this important video. See you next lesson. 6. Flexbox default behavior: okay, We have seen in the previous video the importance off display property. Before I start with other properties, I will litigate the next few minutes to know the default behavior off the container and the flex item, so that when we come across with some situations, we understand that it isn't expected behaviour in a flex box model layout starting now with our goat. I just want for now a container and the flex item defined with background color, some margin bedding and border values to be easy to distinguish these two elements. Now, the first situation to analyze there is no with and I defined, and I want the containers a block element to occupies all the with, so to stay as a block element. First, I define again display with value flex. You see that the flex item that just it's with to the text content as we saw in display property. If you write more text, do without, the flex item will increase. This is one off the default behavior when used flax box. In the second situation, I just define I've to the flex item with the value off 300 pixels. With this value defined. You see that the container will follow the growth off the flex item. The container is slightly larger than the flex item because a margin value has been defined . Now I'm going to do the reverse. I define I've off 300 pixels to my container, and it's visible that the flex item will stretch until feel the ice off the flex container . There are two very important behaviors off the flex items, the right stretching and with shrinking adjusting to deflects item content. The next example I defined for the flex item with off 200 pixels and add another five flex items in my HTML code. The same off total with off six flex items is bigger than the with all the flex container that occupies you part with Soto. All the flex items appears inside the container. The only solution is that the shrink to fit that is another default behavior of the flex items finally in set off definer with I use property Mine with with the same value to behavior now is different because I'm forcing the flex item toe have at least value off 200 pixels and for this condition they will not shrink if necessary. What makes with six flex items? Some of them stay outside flex container. These are some typical situations you will find sometimes when using containers and flex items. After this video will certainly be easier to understand and identify this type of behaviors in flex box model. See you next video. 7. Flexbox direction: Hello again. It's time to learn another parent property. At this point, we defined our flex container and flex item using the container and ive mine in the HTML code. In CSS, I defined display property that receives value flex to display the container as a block element and in line flex that display container as a flex in line element. Setting this property with one of these two values transformed direct Children's elements into flex items. I will keep this property with value flex in the coat because I want my container as a block elements. Now it's time to flex the action property. So what makes this property deflects that X earn CSS property specifies. All flex items are placed in the flex container, defining the main axes and the direction that can be normal or reversed. This property can create for different situations. Flex item displayed in or resentful from left to right and right to left and vertical from top to bottom and bottom to top. Before, at my new property, I had two new lives inside the container to see better the effect off this property. I changed the text for this three d efs to be numbered from one to tree and understand what is going to change in the direction and position off flex items Using deflects direction. The new Leafs have died the main like the 1st 1 so we don't need to add a new I D selector in CSS I defying a different I've for the container with 400 pixels and I want my flex items with with an off 40 pixels now deflects direction that is applied to our flex container. This property can F four different values. The default value is row, where the flexible items are displayed in horizontal as a row from the left to the right. Like you can see in this example that I write in the goat and now is present the results in the browser the second possible value. Israel rivers that is similar to the previous value. But the flex items are with reverse order displayed from the right to the left and the main start and meant endpoints are now switched when compared with roe values. Dessert value is column debt. Put the flexible items displayed in vertical from the top to the bottom off the container and for this value Domain access is now one vertical from top to bottom and cross exits from left to right. And the final value is column reverse that displaced flex items in column again but in reverse order. In this situation, the main exit start at the bottom off the flex container and ends at the top. The cross exes Growth from left to the right. Okay, you can see that with this property is now very easy. Change the direction and reverse order off the flex items. What did not happen with older CSS models? And don't forget one important detail. Changing direction off the flex items effects the main excess and cross excess. It's so for now. See you soon. 8. Flex wrap: Okay, lets see Flex rap property. At this point, we create our flex container and reflex items that can be displayed in different direction . Using the property flex direction One of the default behaviors off flex items is tried to fit into a single line. I make now another change in the HTML coat ending to more defense like the previous stream my flex item four and five in the C s s coat I want to define and 90 pixels with and 70 pixels right to keep the size off the main dif if you remember using just with did not resolve the shrinking off the flex items needing before the mine with property. But there is no problem. I want now that my flex items rep when I resize the window instead of shrinking, they will wrap automatically when windows size is equal to total with occupied by flex items and using this way I can keep doing property. This method is very used for responsive layouts And to make this change, I use flex wrapped property. This property specifies whether the flexible items should wrap our not having three possible values first. No rap. That is the default value. Rep and Rep reverse, starting with the first value I define inside, my container deflects rep with value no rep that not change nothing in my layout. If I resize the browser window, the items stay in the same line like you can see now, and they will shrink to fit in the container. The second value is wrapped that makes flex items to wrap into multiple lines from top to bottom. After changing the property to value. Rep. I resize my window and you see that some flex items will wrap and go to the next line. This property is very useful when we want to adjust to condense to other type of devices like tablets and smartphones. The last value is rap reverse that is used to flex items. Wrap into multiple lines from bottom to top. The first flex item that starts on the top when I have value. Rap is now the first item that starts from the left bottom off the flex container. If I resize again the window, some elements will wrap as expected. It's the end off this lesson. See you next video 9. Flex flow: welcome Flex Low is the next property to learn. This property is a sharp than for the two previous properties. Flex that action and the flax rep. The default fell is for this property is rope for deflects, that action value and no rap for deflects Rep property. Now I'm going to add this property and joined the values off Flex at Action and the Flex Trip to Flex Flow. I define flex flow with values Row and Rep to display the flex items in rose and wrapped flex items. When I shrink do window like you saw in another lesson. Now I make other change. Instead of display in row, I want in reverse road to display flex items from right to the left, so I defined flex flow with values. Ro reverse and second value off property changed to know rap. With this values, the content will shrink when I resize the window, as expected, in the final example, I changed the direction to column, and I want to wrap deflects items using rap value for flex Rep property for these guys. Instead, flex items wrapped into multiple rows. They will rep in multiple columns like the image show us. It's so for now. See you next video to introduce another property 10. Justify content: Hello again. Let's learn out to align items using three different properties used in flex container. Starting in this video, we justify content. This is property that aligns the flexible container items when this not use all available spice under are resentful direction. As you see in this example where I f the five flex items a line to the left. Don't forget that the flex items are not totally together because we have defined the margin for them. This property helps to share this extra free spice left over when either all deflects items on the Leinart inflexible or are flexible but every each their maximum size. First, I changed with an I've off likes items to 50 pixels, so we have some free space in Maine excess and grass access. The other change is the ID of the container death ratify. Now we'd 700 pixels. Now the possible values this property as five values where the default is flex start that puts the items, position it at the beginning off the container. I put now the property with this value and is visible that there are no changes because this is the default value now changing the justify content to flex and make the items place to the end of the container. As you see now in the browser window Flex, start place items at the left, off the container and with flex and the items moved to the right. The next step is to position the items spect flush to each other toward the center off the lineman container along the main access. To get this alignment, I need to give the value center to the property, justify content and after that these changes in the layout are visible in my brother. This place between is another possible value to this property, and items are evenly distributed in the line. The first item is on the start line and lest item on the end line, the last value space around is very similar situation to spice between but now spice before the first and after the last item is equal to off off the space between each pair. Off edge isn't items the brothers show now all deflects items are inside the continue using this value Now that we saw all the five different situations, I create a different disposition displaying the items in columns using the property. Flex direction with Value Column for disguise Domain access changes from horizontal to vertical. So if I give Valley Flex, start to justify content, property and flex items a line along the vertical flex start make the items backed on the top off the container. And if I change to flex and the items stay pecked at the bottom off the container, that's all for now. See you next lesson with a line items property. 11. Align items: okay, it's time to align items, property deal line items. Property defines all the browser. Distribute spice between and around flex items along the grass access. This means it works like justify content but in the vertical direction. If lex items are displayed in horizontal, this property as five values, where the default e stretched that causes items to be stretched, respecting the with and the Eid value if they are defined for the dif To see the difference between a div we'd configured, I tend with and other without this properties, I give I d Maine one to my first dif and delete do with an ID for the CSS code for the single leave we see now, as expected, that the first def is stretched without using any aligned property. Now that I have this change, then I will put the property line items with the value stretched the first flex item without value off it still stretched and do with valued adjust to the size of the difficult tent that it's expected if these two values are not defined. Finally, if I remove the ICT value in my main dif, what happens? All the Children inside the container will stretch like expectable Now I return again toe I'd values and lit main When I d for the next situation, I desk together for values off the line items property. I will use a different approach using the selector and child that allows to assign different property values. Selecting on Lee the Children's that I want. I want for disguise to give to Children one entry with I D Maine ICT off 20 pixels and align ICT with 40 pixels. To create this effect, I want to rule for my element with I D Maine. Just selecting child one. Using an child with valley one and child three using again and child with value tree. Now I know that the code that I write will Onley change style for Children When entry I define at 20 pixels, right and line ICT off 40 pixels returning to align items after the flex item stretch Because the it is not defined, I show you another possible value. I give flex start value to property align items and the flex items are now position it at the beginning off the container with I defined. If you use stretch or flex that value dilly out will be the same for both cases changing now. Property to flex and we see a different situation with value flex, and we get the opposite with items. Position it at the end off the container. The next value to insert this center with the value center deflects. Items are central within the line on the cross excess, and the last value is baseline, where deflects items are aligned along their contents. Baseline. I create previously a different line ICT and with baseline value. You see that deflects items are now aligned by the text content. Baseline itself for now. See you next lesson. 12. Align content: hello and welcome you saw in previous video do property line items that distribute space between and around flex items along the cross access off their container. And now we'd signed to align content this new property lines of flex container lines within when there is extra space in the cross. Access similar to our justify content, aligns individual items within domain access before start showing the different values. I just make some changes in the coat. Putting more for gives inside the container. This def addition is my two F mark than one rope and Onley. This way we can see the effect of this property in the flags items I make now. Changes in the CSS called giving 60 pixels to flex items with Next. I defined the property flags rap with value rap to understand how these property works when the flex items wrapped into multiple Golden's. Now that I have made the change, I'm going to start with values off the line content property. The first possible value to this property is the default value stretched that makes line stretch to take up the remaining space like is visible now in the browser. This behavior it's only possible because I didn't define I'd value to deflects items changing now to flag start this value makes the lie. Inspect to the start off the container. As you see now, adjusting deflects items, I'd to the content off the flex items. The next value is flex, and that is similar with flak start. But now the lines are packed at the end of the container, like is visible in the right window. There are now left in three valleys for this property First Values center that makes the lie inspect into the center off the container. The next is the space between value, where lines are evenly distributed and the first line is at the start of the container. Wild last one is at the end off the container, and finally, the last value is space around where the lines are evenly distributed with equal space around each line. You see now in the image all our deflects items are online. Using this value to the property align container, it's the end off parents property. In the next videos, I will show you the properties for the Children's thanks 13. Order property: I Let's learn first property that can be applied directly to individual flex items. The order property. The order property is used to control easily the order that flex items appears inside the flex container. What not happens in older CSS versions when using other type of properties, like position in floats to change the location off some elements returning to flex items and order property by default, they are ordered as initially added in the flex container. When you write the HTML code, the great advantage of this property is that flex items can be reordering, changing the property value give by a number without changing the html cold. I change now my coat to f just tree Deif's s flex items that f with an I thought 70 pixels . This tree leaves will receive the other property to change the order off the flex items To create an order value image main dif I use anti child selector to select the treat, beefs elements and give individually value toe order property. So I defined now in CSS my first child with i d mine using the end child with value one and I repeat the process to the other defense using value to entry for each other. And now it's possible to write the order value for each Children I define order for the first child with value three far second child value to and finally the last child value one . What is going to happen? Second flex item, Keep the position and first and certain flex item switched. Now making another change. I want my second devette left. So I assign order with value one the first original dif I want in the middle. So the order value is to end assertive stays on the right like in the beginning reason why I give value tree to order. If you want to add more dips, it's very easy. Just need to have in html code and in CSS just make a copy off the anti child cold and give the order valley to position Deve inside the container. Don't forget and keep in your mind that using this property is the easiest and fastest way to change the order off the Dave's. Thanks. See you next video 14. Flex grow: the next property is flex grow. This property specifies the flex girl factor off which Lex item which define how much the flex item will grow related to the rest of the flex items that are inside the flex container. When free spice is distributed using the same flex grow value image flex item make, all the items have roamed the same size into container forties new property. I show you two different situations in the first. I do not have the wit define for three created gifts, so I have all the flex items with the same conditions. The default behavior off the flex items is to adjust it if with the content off the item so , as expected, did the real drink like you can see now in the image now creating to flex grow property for the tree leaves. Using the end child selector, I give the valley one to child one to and tree. You see that the flex items will increase their size equally until they feel all the spice . In this situation, whenever we use an initial equal value total flex items, the wit will be the same for each item corresponding toe once served off the Free Spice to each flex item. There is a detail that is important to understand in a case that the initial with is the same. Using flex role with same value. Do with grow in the same proportion for the tree. Deif's so, as expected, the final with still the same. And if I define a different initial with let's Give a With off 200 pixels to the first child and 50 pixels to the others using the same flex row number, the distribution of lifting spice is equal to alternatives. So in the final day of one reminds the largest. If this is a different situation from the previous situation where the final with is equal , let's make now a scenario where the initial with is the same for the three d EFS. I want to give one of the Children value off to to flex, grow and the others one. What makes that child feel double off the free spice in relation to the others. To make the calculation off the free spice that each D feel just need to send all the individual flex grow values and then just need to make individually the ratio between each individual flex grow and Sam that you find first. So for the treaty gives wheat flex grow to one and one. You get for the first dif to fart off the free space to feel that corresponds to off off the free spice. The second answer tive will occupy when Fort off the Free Spice. Imagine a situation that we air first item with 100 pixels and the others with 50 pixels. If I m flex role values to 11 and, for example, the free with is 800 pixels. The final with off flex Item one is 100 pixels added with off off the 800 pixels. Debt as a final result, off 500 pixels and the other to flex items with is 50 pixels. Edit with 1/4 off 800 pixels that is in the final 250 pixels. The last example. I give Valley Tree for the first dif and to to the seconds finally, desert stay with value one. The first flex item will feel 36 debt corresponds to off off the free spice, the second D field to six off the Free Spice and the last d feel 16 off the Free Spice I Ope. It is now clear all this property works things. 15. Flex shrink: Welcome again. It's time to flex shrink property. This property receives a value that specifies the flex shrink factor, which defines how much to flex Item will shrink related to the rest of the flex items. By the fault, all flex items can be shrank, but if we set it to zero, they will maintain the original size. For these first example, I define a container with 500 pixels and might reflex items with a week off 300 pixels, and I want a value of zero to my flex shrink property that makes the original values off with off the flex items don't change. So as expectable with this value deflects, items are overflowing the container because the some of that reflex items is larger than the container, with the next step is changed. The flex shrink valley toe one that is the default value, and I apply for this reflex items. What makes them to shrink in the same way to fit the container? Because we have the same shrink value. How much higher is assigned shrink value to flex item? The smaller deflects item will be. That's the example that I want to do now where I defined my fax items with values tree to and one for the flex shrink property in the browser is visible. That deflect shrink with value Tree will make that correspondent flex item will be the smallest and flex shrink with Valley One will make that correspondent flex item beat the biggest U f in the cars curriculum A supplemental resource that show you out to calculate to with values off the flex items according to the value off flex, grow and flex Drink Don't forget to see that document to understand our calculation is made . See you next video Thanks. 16. Flex basis: the next property to show is flex buys is this property takes the same values as do it. Then I'd properties and specifies the initial main size off the flex item before Free Spice is distributed According to the flex factors, this property can receive a number that specifies the land off. The flex item that I use for the next example I give to flex buys is off the first flex item, a value off when 100 pixels, the second flex item, 70 pixels and the surge 50 pixels. And in the browser we see these changes in the different Deif's. One important note is that if I change the direction from road to call him using the flex direction property in the container, this property will affect the ICT instead of the with, as we can see now in the image. The other value that property receives is value outer. That is, the default value without a value do with is able to the wit defined for the item. If the item has no well defined, the wheat will be according to its content changing now the valley to out off for that reflex by this properties, we see death to with all the facts. Item is 70 pixels. That is the value defined in my i d selector main. Finally, if I delete this value and keep the value auto inflect shrink the flex items will shrink and adjust to its content because there is no well defined, that's all for now. See you next lesson. 17. Flex: okay. The flex property is the sharp 10 for the flex, grow, flex, shrink and flex By this properties the second insert perimeters, flex, drink and flex biases are optional. I introducing the next minutes for possible values for this property. When off, the most common values for this property are flex equal to zero alto. That is the same as flex with value initial and the short and for the default value flex zero to flex, grow. Want to flex shrink and alto to flex bases that size is the item based on Do with I've properties or flex item content if this valleys are not set? If I defined for this guy's 400 pixels off wit for that reflex items, the sum exceeds the with container. But with value initial off flex property, the items will trying to feed the container. As you can see now. Finally, if I change flex item, we'd toe 100 pixels. You see that flex items not grow and respect do we define because Flex Rowe property as value zero other possible value is set flex 211 alto that is the same as setting property flex with value auto this combination of values sizes the items based on its with either properties but makes it fully flexible so that they observed any extra space along the main access for the last examples where I changed with 2 100 pixels, I'm going to get another result, and now the flex item will feel the rest of the with off the container with this fellow's. The flex items shrink if they are overflowing. And if I only defined flex with value alto to the first child and the others with value initial okay for the scenario, child to entry. Keep the weeds size and the first child we lock it by the rest off the free space off the container. Now flex with value in in that is equivalent to flex 00 auto. It's size is the item according to its With and I properties, but makes it fully and flexible. This is similar to flex with value initial, except it is not allowed to shrink even in a over full situation, showing again to situations first with with off 300 pixels, it's visible that the flex items doesn't shrink with the flex items overload changing from 300 to 75 pixels. The flex items don't grow to feel all the width off the container. It's visible now. This scenario on the page the last value is Wendy Flex property. If a positive value assigned, it's similar to have that positive number as flex row value. Flex shrink with Valley one and flex buys is with value zero. This situation makes the flex item flexible and sets the basis to zero, resulting in an item that receives the specified proportion off the remaining space. If all items in the flex container used this pattern, their sizes will be proportional to the specified flex factor. I use now barely one for the tree flex elements. And as expected, the flex items will increase their size equally until they feel all the spice, because the value of flex property is equal to the tree items. Similar situation When we applied the flex grow property Thanks and see you in the next video 18. Align self: now the final flex item property deal lines self delights, sales property specifies the alignment for the selected item Inside the flexible container this property makes possible to override the line items that you saw in another view, that is a property applied to flex container and not flex items and defines all the browser distribute spice between and around flex items along the cross excess off their container, using the same fellas that were going to use with the light self. In the next example that I show now I have my container where I define property a line item we'd flex start that put the item at the top off the container. As you saw in another chapter. I said previously that the line self override the line items property. So if I defined this property with value Flix end for my flex item one. I change these flex item to the end off the container. Accepting this value debt override the light item value in the container. The other flex items stay in the same place as expected. There are more for properties used. Flex starts center by his line and stretched. That is the default value I'm going to change to value center and in the browser, the item is going to be centered as the image shows. Now I'm going to push the items to flex and using a line items, and you see that reflects item that is in the center doesn't change as expected. This is just a property that instead off create alignment to all the items applied the change to a specific element that can be in certain cases useful, depending the layout that you want in your page. This was the less flex item property in the following videos. Let's learn out to create really layouts and their content. 19. Holy Grail layout introdution: hello and welcome again for this new section. And after learned the flex box properties, I want to create the first layout using the flex box model first, the so called Holy Grail layout using two different methods. That is a good experience to understand the great dynamic and different ways that this model asked for. Building layouts. After using the two methods, I will create the content of the page in order to make the creation off a webpage. Debt can be used for real world after create only grandly out. I'm going to show an advanced technique that allows a great layout versatility. See you next lesson. 20. Holy Grail layout - 1st method: So let's start with the only grey layout. The only grain layout is a page with the other footer entry columns with equal I've where the center column contains the main content and the left and right columns contain other type off content, like it's our navigation menus. To create the only grand layout, I used two methods first using the other and the food er as to block elements independent off the remaining content that will be created using the Flex Mozz model. You see in this image that situation. We do block elements together at the top and footer at the bottom. A flex container is used to group to tree center elements that is visible now elements that will be might reflex items, starting with HTML code for the first method. I insert my other using to other tech, and I can already put my footer with the fruit er tech. We have these two elements, one that will stay at the top and the other at the bottom. Between these two elements, I want to create three new sections, the 1st 1 with the navigation links where I used in F tag a section with the main content off the page where I used the Tech article and at the rights might take asides. This tree parts will be arranged in a single row that I put inside a div debt I create, which I call container and work as my flex container. So inside off my container, I have my tree flex items, death I already created in the Coat Nev article and aside now the CSS code. I will start by defining the style for my mother giving a gathered blue background color, and I did. It would occupy 15% off my view parts we already see in the browser this element that occupies the entire with now the footer elements that is similar to the other. I just give it a different background color to be able to distinguish between them. The Eid value is equal to the value that I gave to the other, and now we can distinguish the two elements as you can see to finish. And now that I have the two elements creators, I optimized the cold by creating an unique rule for other and footer using the same background color. The next step is to create containers style for the situation. I create my class selector container that Onley receives the display property with deflects value, which allow direct Children to act that selects items by default. Deflects items are arranged in rows. That is the direction that I want to use so we don't need to use defects. Direction, property. Let's now build that reflex items on the left and right. We have the navigation links and element a size as the other and food occupy each of them. 15% of the view part the Neff and the side will occupy the remaining ICT until the 100% as background color. I define dark gray, and I use flex property with Valley one to set to wheat proportion. That is, two items occupy. Now that we have the never and aside elements we need to create the article that will also occupy 70% off the view part for which I'm going to give an Ellis blue background color finally defined the proportion off the with occupies and since I want this element to occupy four times more spice than the previous two, never inside I will assign value for to flex property. We have now completed the first matter to create this layout, thinks 21. Holy Grail layout - 2nd method: so let's start now with the second method. The difference from the previous one is that I use a flex container that will contain three elements, including the other and footer that is visible now in the image the code created previously will be used for these new matters being just necessary to create some new cold. For this case, I am to my HTML coat a div with class name Main David that will include all the elements inside in the CSS. I defined the style for the glass Maine, where this time I want to flex container to occupy 90% off the wit. So for the situation, I don't want that to wheat occupy all the spice and for the container to be centrist. I defined the margin property with the values zero and auto to finish. And as usual, I said to display property to flex. And now my flex items will be together my dif with class name container and my footer where all these elements being arranged in a column. Reason why I said the property flex that action with the column value. The remaining gold will be the same because I continue to have a flex container that already existed previously, using the first method container de test, three elements in a single row Neff article and the side elements. The second method is now completed, and I will use it to create layout content, things. 22. Holy Grail layout - create header content: let's now to the best part, to contend for our pitch, starting with the other first, I show you an overall picture off the finally out. I want to design a page debt. Present some information off a company that provides cloud servers for users. Let's now talk in detail about each part of the bridge, starting with other. I want that dis element ever Page Lago placed on the left side, off the other and, in the right side, a Facebook symbol with next followers, where we can create any pearling to the Facebook page. To make these changes, I create inside the other tech and you dif with class name logo for my logo and another div with class name face that includes a div with name, face, image and another. We'd name face text one for the Facebook Lago and another for the text you see now in the browser. These elements placed inside other indentified by text that I wrote inside the leaves. The first change to be made in CSS, is to define in the other the display property with the value flex because this element will contained flecks, items that receive image and text as I want to add logo on the page on the left side and the image and text related to Facebook on the right side, I used justify content with the value spice between putting the elements that left and right off the flex container. I'm going to start developing the goat for my flex items that are inside the other. The logo Deve Wilson contained the longer off the page for which I set with off 200 pixels and I'd off 90 pixels. Then I create the gold for my class selector fais. That will be the other flex item inside the other. First, it contains to display property to which I will give the flex value, since dislikes Item will also work as a flex container because I have to flexible items inside it, one for the Facebook image and another for the text to place this elements with some space on the right margin. I define margin right with the value off 50 pixels and use the property align items with center value so that to flex items defined our central and the lines, I will now create the style for the to flex items. Want to receive image and other texts for the face image class, I said the flex property with the Valley one and for the class face text I use again. The flex property, this time with value tree do with occupied by the flex item that receives text, will be three times larger than the flex item that receives the image. The next step is to define in my coat the images and text to put in the other off the page . First in the deep, defined with glass logo, I entered the Lago image using the E M G tec inside the dif with the glass face image. I place new image this time with the name Facebook Emit that just like the previous one is saved in the main directory. Finally, I put the dext follow us inside the deface text. The last action is defined with, and I'd for the two placed images. First, I defined the style for the image that is inside Lage live with a with off 150 pixels and light off 90 pixels. Then I create the values for my image that is inside the dif fais image with the with and I've off 40 pixels. We finally if our other composed by the different elements, see you next lesson 23. Holy Grail layout - create navigation links: After creating our aether, I will develop navigation links that are placed on the left side of the base where we use Neff Tech for this situation. I create within this element and you live with class Neve Link, where I create my least of links using an in order list with three least elements that correspond to my navigation links. The first with the name own, the second that I call projects. And finally, the contact link item now developing the style for the mine F elements. I'm going to give the flex value to the display property because the Neff will act as a flex container and finally used the justify content property to center my dif that is inserting sites the nef elements now creating the style for the ul element. First, I want to give a background color just to view the position of this element on the page giving the light green value to remove the bullets. I give the value nan to the least style type property and finally I give a bedding off five pixels in order to ever similar space around the three elements off the least, placing the items at the center for the least items. I will Onley define a 10 pixels, spending to create a greater distance between the ailments off the least. And now we f our navigation least made. I now remove the background color that is no longer needed. If you want to create a pearl ings, just need to go to HTML code and use deeper link tech to create individual links to other pages. 24. Holy Grail layout - create main content: Hello. Let's now create the main content off the page defined in the article section, I want to insert two contents, one image and some text like you can see now. To insert the image, I created new dif with last name Main image That will be one off the do flex items creators being the other the dif with glass name main text that receives the text that I want to put in the page. Turning now to the content inside the first dif I insert the image with the name Cloud J Peg and indeed Ive main text. I first insert the title off the decks with Take Anything followed by a bear riff with the main text text that I copy from the file that I have in the main folder before creating the CSS code for these new elements, I have to define the article element as flex container so that the lives that are inside work as flex items. So I add the display property with flex value to my coat. I create now the gold for my main image class selector This class as the property flex with really When and I give a margin off 40 pixels to give some space between the top and left side of the flex container. Now, to give the style to the image, I define the image element that is inside men imaged if with the with off 300 pixels and the Eid off 240 pixels, The last step is to give a barter with one pixel and color black. After the image the glass selector made next, I defined with value flex one, like the image for the to flex items occupy the same space. Finally, I define margin property with value 50 pixels to the right margin and 20 pixels to the other tree we see now in the browser, the content created in the article section things. 25. Holy Grail layout - create aside content: no other side element that I use in order to be a part of the page for news related to companies websites to create content inside element of size I had a div with glass name asides text where I put the title latest news defined with everything followed by the paper link that you can create that leads to the news detail and I write the example Text new clothes servers decided text if work as the flex item inside the side element. So I have to define the side as flex container using display property with value flex now to center deflects item I used to justify content with value center and final detail is centered heading I create a style for having we text the line property with value center placing the other text at the center off the flex item This is just one off the possible solutions for this section of the page You can always create another type of content if you want. Thanks 26. Holy Grail layout - create footer content: Finally, my footer were like the other. I created leaves that will be position it to the left and right side of the footer and work as flex items do content in the left side of the food. Er I put in the food er left Dave where I want to wear a bear ref. We'd copyright text and other text identifying my decides end to the rights. I have the food, er writes Deve, where I put a paragraph with text site map that can receive any pearling toe other page in the CSS cold. I defined my food er with the display property with value flex and to position deflects items that left and right. I used the property justify content with value space between to align these to flex items on the cross access. I used the line items property with the centre value and now to finish the footer, I give some margin so that the flex items are not at the beginning and the end off the main exits off the container defining margin left with value 60 pixels for the flex item in the left and margin right with the same value for the flex item place that rights. We have now finished the content off the webpage. I hope you enjoy it. Thanks. 27. Advanced layout technique - part 1: okay. After creating the Holy Grail layout, I use a different technique to black flecks box model to create the layout. The main i d be I. This technique is creating Main Container Death Group. Hold flex items to be using the layout, defining in CSS individual rules to some of them in order to shape the layout of the page. Let's see some examples to understand these matters. For the first layout, I create my dif container where I insert inside six flex items using the glass name Flex item. At this point, nothing new in relation to what we learn now. In the CSS, I said my container with the with off 70% with a background color, Burley would ID off 600 pixels and finally to center the container. I defined my margin with values zero and out. Aw, finally, my display property with the flex value, allowing the flex context for all direct Children. Four deflects items I define all with the same size, giving the valley one to the flex property ID off 120 pixels, a margin off 10 pixels and a background color. We chocolates value. We can check that the layout s flex items inserted in a single line as expected, all with same with strategy. I used to change the layout is using flex rep property that allow you to arrange the flex items in different lines, along with the flex rip I also used and child selector that allow me to choose flex items individually in order to change Onley some properties off the Jews and flex items. This combination off like strip and end child, will allow a great and Amy creating layouts I'm going to use now combination off flex rep and end child, where I said flex right property with the rap value that allowed to create multiple rows and my line content property, wheat flex start value so that the flex items being arranged from the top. At this point, you do not see differences in layout just because there is no content in the flex items that causes them to shrink without moving to the next line. If you were contends, you see that the thieves rep when you shrink the window and some of the items will move to the next line, what will I do next? I want that my first and Fort Flex item toe occupy the full wheat and ever smaller I for these I used and child selector where I have to choose my child one and four and define my flex property with 100% value to occupy the entire with and sets I off 50. Big Self. What will we see in the browser? The first insert line at the first and fourth child that occupy full with and second and fourth line F to flex items in each line that talk by equal spices. Because we define flex property with value one. In the next videos, I'm going to create only gray layout using this new method thinks. 28. Advanced layout technique - part 2 (Holy Grail layout): for this new example I want to create again. Doley Rarely out, but this time using the technique I presented in the last video this layout, as we have seen previously as five different sections. Reason why I need to define five flex items inside my container gold that I defined now inside the body day, I create the coat off my container, this time with background color black and a with with the value off 70% to center container . I used again the margin with Value zero and auto flex rip property with value rip and aligned items at the top using the property line. Condense with value flex. Start we now if our container define, let's not create the style for our flex items where I want to initially define all of them with the same with. So I used the flex property with Valley one and I've off 70% off the view part. Then define background color with the chocolate value and finally, a margin off one pixel to be visible space between the flats items. Now it's time to apply the styles to just a few flexible items, so they do not have style said. Previously, I start we child's one and five that represent the other and food er off the layouts. I used n child selector for these Children and I applied flex value with 100% to occupy the entire container with ID off 15% of the view part and finally a background color with the value cornflower blue we have now other and food or completed to finish. I need to create the style for the reflex items that have the same size due to having the flex property with Valley one to change the value off child tree so that it takes up more space. I create a rule in which this get value tree assigned to flex property and give a different background color with light great value. It's now visible that this child now could buy more spaced and child to and for, and we have finished our layout. Thanks 29. Introduction to Media Queries: With the great diversity of Internet devices available today, it's vital the creation off responsive Websites, which allows a website to adapt to any type of device resolution where content design and performance are necessary to ensure client satisfaction. One of the greatest advantages are responsive Web sites is that offers a lower meant discussed as compared to running different versions of a website to adapt to different devices because you just need to make the changes to unique version, applying media queries that are useful to apply CSS styles depending to device that you use for following example where I'm going to apply a media query, I will create a layout containing another and a container death s to flex items I create in html the other tag and the debt work s container. We do the ifs inside that I give the class name flex item where I insert inside an ad Inc with text Title one, and I do the same with the other flex item. But this time with the text title to I f. At this moment, the html almost then now just to finish I copy to Dex a bigger text for the first flex item that I insert in a paragraph and a smaller to the second flex item that I put inside another paragraph for the CSS. I initially create my other and set it with a background color gathered blue and night off 15% of the view boards. Now the container where I have to display property with flex value, that background color light, CNN and I'd off 85% of the view port to occupy the remaining I've to finish. I define the style off my flex items where I want them to occupy all same space, giving the valley one to deflects property, a burly with background color and finally I want define I'd off 200 big SOLs. In order to distinguish do flex items, I create a rule to change the color off my second flex item, using the and child selector for child to with background color blue violets. Now we can distinguish the two flex items containing debts. Now it's time for media query. If I try to shrink my window, you see that there is a moment that that start overflowing the flex item, and at that point I have to change the layout due to window resolution that let the content over full the flex item. So I create a media query in the CSS with that condition that I just And it's about 1000 and 200 pixels where the situation happens and work as my trigger points. So I defined the max with property with value when 1002 100 pixels that makes that rule apply to situation between zero and 1000 and 200. I have to define my flex item to be arranging column in cell row so that the text fit inside the flex item. So I define a rule to container where I use flex that action with developed column for this situation. Now I'm making another change. My first flex item is more decks than the second. So I defined for the first child a flex value tree to occupy three times more free spiced and the seconds the second flex item I define with Valley one for the flex property. For these two situations, I used then child selector to identify the child that I want to change. We have now our changes made and you see that when I shrink doing, though deflects item press from road to call him in which the first flex item is greater than the second. The last situation is if I want to change the order of the flax items. To do this situation, just need to define order. Property for second child with Valley one and first child defined with valley too. We now if our flex items we different Arthur when we resize the window. 30. Make your Webpage with Responsive Layout (Holy Grail Layout): in previous videos, we have already created the layout of a webpage, and the respective content you see in the bite created that we have five different sections where some of the contents are getting overflow. As we shrink the size off the browser. In order to f a responsive design layout, I have to introduce solutions that allow the content to be clearly visible. To get this result, I use media queries as already used for the example in the previous lesson for this particular case, I want to make a change into three elements. Never article emphasize, and then step off being arranged in a row. I want to put them in a single column to give more space so that we can see the content inside flex items when we have a low resolution. I put now Media Query, in which I select 1000 and 200 pixels as my transition points. That will be my max wit. So from zero to this value, I have all three items in a column for this condition. I change my container with property. Flex that action with value column, checking again the window. We see that from a certain point. The content is arranged in a single column. I now adjust. The values of that transition is made with a lower value because the window can still be resized, a little more without overflow to content. I give the value 950 pixels and making the test. We see that it is a value that is closer to the ideal now that I have the value defined and already at the element in column, I said they knew I'd for my Neff and the size giving a value off 15% of the view part. And I want the least I have inside my never elements to be central on my cross access. Reason why I give value center toe my property. Align items No one important change. I want my navigation links in or is a gentle, So I create a rule for my least items, giving the in line value to my display property. Now that we have links change, I just optimize the space so that the flex items that as the text stay with more spice than the flex items that remains with the image for this purples, I define a rule for the class main image with Valley One for the flex property and my mind text class. I give the valley too far the flags property. And finally I changed the left and right margin to zero so that the deaths remains within flex item for smaller window sizes. If you want to change element order, just need to use the order. Property I make now will change where I want. That decide appears first in second never and third article. So I define order one toe aside Arthur too to never and our other tree. Two article we have now finishes our media query and you can see that our site is completely a vegetable to any kind of resolution. Thanks. 31. Responsive Design without Media Queries (With Flex-Wrap): After using media queries, I want to make now an example or responsive content that excludes the media Berries using flex rep property that help you to transform your layout into a responsive design. I'm going to use this example off the media queries in which I have another and to flex items inside the container. For this case, I defined that for resolutions between zero and 1200 pixels, I apply the rule that put the items in a column giving different sizes and orders through the flex items. For this new example, I also want to put the items in columns when the decks is overflowing, but this time using flex wrapped property, excluding the media queries for the situation. I will then delete the colt that refers to the media queries, and after removing it, I can longer every item in columns. When I changed the resolution, now I have the property flex rip to my coat with rap value that allows items to wrap inside the container. The trick that I use is to create a with value for the flex items so that when they reach these values, one of the items will be forced to go to another role. For this, I create a flex by this property with value 600 pixels. You can see now that shrinking the window, the flex item already best is to the other road. That is a similar behavior that we at when we use media queries. I'm just going to make some changes in the cold. First F a bedding with value off 10 pixels to give some space between the decks off the do flex items a margin off when big sel and to finish. I placed the flex property with a value off one one 600 pixels to put all in one property the 1st 1 to deflect Sgro when for flex drink so that flex items can drink if necessary, and 600 pixels for deflects by this property, things 32. Bootstrap flex intro: in this new section, Let's learn how to implement the flex box model that you already know, but now, using bootstrap framework. Good strap. It's an HTML CSS and JavaScript framework that you can use as a basis for creating responsive websites or Web applications using CSS bread defined glasses to design the layout of your weapons and F interactivity using JavaScript one off. The big advantages off this framework is the speed off development, because you can save your coding effort by offering less CSS coat. Since blocks off CSS coat are already bread defined in classes that you use in your HTML code inversion for bootstrap youth flex glasses to lay out control. What not happens in previous versions where floats were used to andl page layout. Although the bootstrap allows the use off gratifying classes, you can always create your own classes to customize some elements. Let's see in the next videos out to implement with bootstrap, the Flex box mole 33. Bootstrap - Display utility classes and use of breakpoints: As I said previously. One of the great advantages off using bootstrap is to F blocks off court already defined being Goldie necessary to use the different classes available. Another great feature is the ability to wear glasses that provides break points used for responsively out being very easy to add flex marks properties, we define break points using only a single class. At this point, since you already have a good knowledge about flex marks properties, it will be easy to understand the use off each gratifying classes that I will start now. We display property that defines a flex container in line or block, and that enables flex content for all its direct Children. But before I used these different do threat utilities, I must ever access to all the classes available in this framework by adding directory that is above that provides content delivery network support for bootstrap, CSS and JavaScript. Now that the glasses I recognize, let's see the display utility classes. If you need to wear display with value flex toe annulment like you did in the first videos , you now in boots step, use deflects or D in line flex utilities classes to create a block or in line flex container. Or even better, you can use one of these two classes using for possible break points. But before I yet this break points, I create a simple example for the two types. Block any line elements using boots trip. In this file, I have the flex container using insects s coat. Some properties like to display that define flex container as a block card in line elements . That's what I did in the first videos. If you remember with the Bootstrap, you no longer have the sculpts, and you will used utility classes in HTML codes to define the same type off flex elements. Let's now changed the cove, where I keep the main in flex item classes to keep on Lee background color and I'd properties in CSS in veg TML. Ieft reflects items inside of mine that works as a container. I know at the margin, using now bootstrap classes to give some space between the elements and in the container I . Yet the class deflects that is similar with old display property that I used in CSS with Value Flex, which defined this thief as a block flex container occupying the entire with off the page. If I want the container toe work as an in line element, I changed the class deflects to the glass D in line flex being visible to changes in the browser where the container occupies now on Lee, the minimum space required and now, using break points with these two classes flex and in line flex first, let's understand what are these break points? This break points are based on minimum view part wits and allows user to scale up elements as the view part wheat changes in the following table. You see the definition off each off the break points, where different per fixes are used, being associate ID with specific with points in which you can resize or change the position off the pitch elements. Starting with the first prefix S m, this prefix is used for a view port with equal or greater than 576 pixels. Second prefix is MD. Debt is used for a value equal or greater than 768 pixels, the less to our usedto Iger resolutions with LG for a with greater than article to 900 in 19 2 pixels and finally X l for with equal or greater than 1000 and 200 pixels resolutions that are used for laptops and desktops. I now make a change in the coat to use a break point by the fault. I want the container to be Ava as a block element, so I using the my indeed Do deflects glass. I want, however, to create a break point for large resolutions that passes the container to in line for a week to equal to or greater then 992 pixels. Responding to prefix LG for the situation, I just need to define the in line flex glass with the break point. LG inserted the prefix ties between 1st 9 a signal and words in line. So, as expected, as you resize the window, you see that for value smaller than 992 pixels, you ever block element and for values greater or equal, then 992 pixels. That is our trigger point container passes from block to in line, using other break points. The driver will be similar just being different. Transition point thanks 34. Bootstrap - Direction utility classes: Now let's see the direction off the flex items. You have already seen this property for the flex box model, but this time I will apply using bootstrap utility classes. Flex items can have for possible values. Roll, which is defined by the flex row class debt, works as the default value in which the items are arranged horizontally from left to right role. Reverse using flex ro reverse class, using horizontal direction from right to left and finally to values that set the vertical direction. Flex COLUMN and Flex COLUMN Rivers like to display property. You have to define break points for responsive variations that can be used in these four classes. Now I create a simple situation in which I want that for a with smaller dan 992 pixels, the flex item stay in or resentful, arranged from left to right, and after reaching the break point value off 992 pixels, these items stays vertical E. For this scenario, I create to flex row class and the flex calm class where I inserts the right point using the prefix LG to enable this class using this break point in the browser. EU will confirm this behavior being visible that after reached the break point, flex items are aligned vertically. That's all for now, thanks. 35. Bootstrap - Flex wrap utility classes: it's time to flex rep that is responsible for defining Al Flex items. Rep. In the flex container, you can choose from no wrapping working as the fold Behavior with Flex, no rap utility class are wrapping with Flex Rep glass and finally reverse rapping with Flex Rep Reverse class. I am, for this example more far flex items, starting with possible classes. I used the Flex No rap that, like expected, don't change anything in page. As I resize Vieux Port now changing to the class flex rip, you see that re sizing the view parts to a lower value. The flex items will wrap to another line and finally a similar behaviour using flex wrapped reverse but now items rep from bottom to top off the container. Now let's watch the situation in which the flex items are not repped. So for this case, I use the glass flex no rep class that I did not need to define because this is the default behavior off the flex items. Now I want for a view part with equal or greater than 576 pixels that the items stays at the bottom of the page so I used the class flex wrapped reverse with the break point defined by the S m prefix For the situation that you can watch now in the browser the items stay at the top off the patch without wrapping. And if I resize the window, they will wrap when they are at the bottom. Thanks. 36. Bootstrap - Justify content utility classes: now the justify content agility classes used on flakes box containers that changes the alignment off likes items on the main axes. You can have four different alignments. It starts where items are picked in the start line and that is defined in the class. Justified content starts and work as the default value. Second, possible alignment is justify content, and that is the example that I give now where the items are packed to the end of the line. Next glass is center alignment with justify content center and less to alignments are justified, content between and justify content around that is similar to space around option in CSS Flex box. Responsive variations also exist for justify content using the break points. And that's the next situation. Toe watch. I create now a possible scenario in which I have applied the justify content between class two values below, then 768 pixels. That will be my break point for equal or Iger values. I want to get the items align to the center, so I used the justify Content center class with the break point MD. That's that scenario that you watch now where items stay align at the center after re sizing the rouser. Thanks 37. Bootstrap - Align item utility classes: now that you saw out to align items in the main access. Let's use a line items agility classes on containers to change the alignment off like sytems. But now, in the cross, sex is having five different values like you saw in flex box properties start and center, baseline and stretch. That is the brother default. The class is used for these five guys is are a line item start where cross start margin edge off. The items is placed on the cross start line A line items and with items placed on the cross and line, a line item center, a line items buys line and the line item stretch being possible to use break points with these classes, like in the previous situations, I now present the situation where I have the items aligned to the center in the Cross X is using the class Align items center. And when I reached the value 768 pixels for the wheat, I align items at the top using the class. A line item starts with the prefix MD. This result is now visible in the brother. Changing the vertical line went, the wheat reaches to the break point. Thanks 38. Bootstrap - Align content utility classes: Hello. After learning align items, let's see a line content utility classes used for containers to align the flex containers lines. We doing it when there is extra spice into cross access, you can choose from starts that work as default and center between around or stretch to see how it works. I at flex rep with Value rip and increased the number off flex items because this property has no effect on single rose off flex items you see now deflects items position by applying the different scenarios. First, using a line content start, we'd lie. Inspect to the start of the container, a line content end death passes to the end off the container. Next deal line Content center, a line content around and finally a line content stretch. Now, using a break point for a very simple situation where the items are, position it in the center using the line content center class and after reaching the break point defined by the prefix algae, the items are aligned at the start. That's the situation that happens now when I resize my window and items going from the center to the top off the container. It's all for now, thanks 39. Bootstrap - Align self utility classes: Let's watch now align self utility that is applied to individual items. You can use a line cellphone items to individually change their alignment on the cross. Access using five different alignments using respective classes. A line self Start, a line self ends center, but his line and stretch debt work as a default. Be behavior with the light itself. It's possible toe overwrite the align items value for the specific flex item. In this example, I have the container with the flex items aligned to the center, using the glass align items center I now create in the first flicks item a glass align Self ends, which places the first item at the bottom. Now, if you put Desert flex item with the line self start, this element will pass to the top of the page. Just like the first element. This last flex item override the line items values. Finally, I change the condition for dessert flex item by adding a break point using the class align self M D End that makes that this flex item position it at the top goes to the end. Like the first flex item, when the view part with is equal to or greater than 768 pixels, a situation that now is happening when I resize the window, that's all for now, thanks. 40. Bootstrap - Flex Grow & Shrink utility classes: Now let's watch two important utilities, Flexeril and flex shrink. From what we have learned, you know that deflects row utility gives to flex items ability to grow and feel available. Spicing the container and flex shrink gives to deflect sytems ability to shrinks. If necessary, they can assume values zero and one, and it's possible to combine these values with the four break points. Verily, one for the flex row makes that an element to use. All available spices can, while value one for shrink makes that an element can shrink to fit in the container. Value. Zero Far utilities grow and shrink makes the opposite behavior elements not grow and not shrink. Let's watch some examples to understand. Better out to apply these two important utility classes in the coat I F. Reflex items, all with the same with. And I will apply the class flex row with value one for the less to flex items, which makes these two items to occupy the remaining spice equally. Using a break point for these items, I just need to set toe with value to which the items are going to occupy the entire spice. I use the trigger point off 700 and 68 pixels For the situation that corresponds to the MD prefix, it's not visible death criticizing the window Onley for values greater than or equal to 768 pixels. The items will occupy the old spice off the container. For the next situation, I applied the flex shrink utility classes. First, I define each of the flax items with 300 pixels off, with all items being in similar conditions and the container with 500 pixels. If you use flex ring for the first element with the value zero in the glass, I'm forcing the settlement to stay with this with value and the other two items will shrink , ending the same class. We value zero to the second element I made. Now, the 1st 2 elements inflexible and a certain element is going to be smaller for this situation. But the over full situation happens now, I think, a great point to the 1st 2 elements with like shrink value. Zero What will happen for values off view part with smaller than the break point I have to 1st 2 items with flexible with for Iger are equal break point value. These two first items Stay inflexible. Don't shrinking, and I begin to ever again another flow situation, as you can see now in the browser itself for now. 41. Bootstrap - Order utility classes: I Let's watch now the art of utility classes that you can use with bootstrap framework with flax box. You can change the visual order off the flex items with the and full off ardor utilities to change the order off like sytems. I just have to use the order class that that's in the class Name I. D. Number corresponding to the order of the Flex item showing that situation in the cold. You see that by default, order off the flex items follows the order in which they are inserted in the HTML called. I will then create a situation where I put second flex item at the left, using our their class with value one cert flex item in the middle with the order utility class with number two and finally, flex Item one is going to be the last using number tree in the class. Arthur in the browser. It's possible to see this change in the position off these three elements. Other possible scenario that you saw with the previous utility classes is at break points that causes changes for a specific with other view part I want now that when Vieux port with reach define break points. The elements returned to the original position, using the value one for the first flex item, two for the seconds and ST for dessert. You see now that behavior where items go back to the original position when I resize the view part and after reaching the trigger point Thanks.