Learn CSS Flexbox Practically - Create a Page with Recipe Cards! | Arthur Tkachenko | Skillshare

Playback Speed


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

Learn CSS Flexbox Practically - Create a Page with Recipe Cards!

teacher avatar Arthur Tkachenko, Have a dream and have a nice day

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

22 Lessons (1h 9m)
    • 1. Welcome to Flexbox course!

      1:06
    • 2. Intro to flexboxes. Flexbox Axis

      4:43
    • 3. Parent Properties. display, flex-direction, flex-wrap

      6:11
    • 4. Practice lesson. display:flex;

      1:51
    • 5. Practice lesson. flex-direction

      2:05
    • 6. Practice lesson. flex-wrap

      2:49
    • 7. Parent properties. justify-content

      6:07
    • 8. Practice lesson. justify-content

      3:18
    • 9. Practice lesson. justify-content

      2:46
    • 10. Practice lesson. justify-content

      1:35
    • 11. Practice lesson. justify-content

      3:28
    • 12. Parent properties. align-content

      3:19
    • 13. Properties for children. order, flex-grow

      3:36
    • 14. Practice lesson. order

      3:39
    • 15. Practice lesson. order

      2:25
    • 16. Practice lesson. flex-grow

      2:45
    • 17. Properties for children. flex-shrink, flex-basis

      3:13
    • 18. Practice lesson. flex-shrink

      1:51
    • 19. Properties for children. flex, align-self

      2:50
    • 20. Practice lesson. Holy Grail layout

      3:18
    • 21. Browsers support

      2:37
    • 22. Flexbox prefixing

      3:28
  • --
  • 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.

107

Students

--

Projects

About This Class

This class is about learning how flexboxes work.
Did you hear about them before?

It's a module, that has roots at Mozilla. It's a big timesaver for Frontend developers.
You'll never want to create an HTML page without flexboxes after this course.

We'll learn only basic things. Specification mostly.

All CSS properties related to flexboxes.
And we'll have a set of easy practical lessons.
For each practice lesson, I advise you to recreate an example from scratch(no copy-paste) by your hands.


Be aware, that this course touching only flexbox basics, so you need to know HTML and CSS.
Check this course for HTML/CSS basics: https://www.skillshare.com/classes/The-Ultimate-HTML-Developer/1975500338

b5110d06

TOOLKIT


Github(https://github.com/) - if you ok to share your code with other - My current pick
Bitbucket(https://bitbucket.org/) - if you want to have a free storage

Google drive(https://www.google.com/drive/)  or Dropbox(https://www.dropbox.com/?landing=dbv2) - if you just want to save your code at cloud

You can also use Codesandbox(https://codesandbox.io) or other online editors.
For practice lessons, I'll use CodePen(http://codepen.io).

But I'm sure - for your project, you'll decide to use a code editor.

Code editors
Sublime(https://www.sublimetext.com/3) - I use it around 6 years. small size and everything important
Atom(https://atom.io/) because it's backed by the GitHub team and it also has a Github sync.

If you want to save your project tasks, you can use Trello(https://trello.com)

If you want to have some flexbox practice, you can check this game: https://flexboxfroggy.com/

Additional materials

Flexbox prefixing
https://autoprefixer.github.io/ (i recommend this option)
https://github.com/nattarnoff/flexbox-prefixes(Sass sample)
https://github.com/pandao/prefixes.scss/blob/master/src/flexbox.scss (Sass sample)

Meet Your Teacher

Teacher Profile Image

Arthur Tkachenko

Have a dream and have a nice day

Teacher

My name is Arthur
I'm building a meal planning startup.
Teaching to code my team of interns.
Writing articles on Medium - explaining how I'm building a company.

I managed team members with a different skillset.

Usually, I'm managing developers.

Before I managed 10+ members team, created a documentation for complex projects.

 

Right now I'm code at React/Nodejs

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
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.

Transcripts

1. Welcome to Flexbox course!: Hi, boys and girls. Welcome to my course. Plays both. Smuggle died. My name is also and I'll be a teacher. I'm building my own nail plan and start up. So actually it should. My course will bear related to build in some modules that you can see at food websites. This course O is for beginners. Robots. You really need to know some some basic sense related to success on dished email. But if something will be not very clear well, I'll advise it, too. Just, uh, stops a video. Ah, good question and result by own, this is important skill for were development. So Okay, I think it's a little bare good Germany. I hope youll have farm. And so you actually resent. So let's get to work. See you later. Bye. 2. Intro to flexboxes. Flexbox Axis: All right, let's get started and clone mouth legs but Smarter and Floods. Books Models is one of the best ways in modern. You have to build websites. Let's get started from history before floods boxes arrive. What we have on Lee for a major layout. More set of rules that Germans of size and position of boxes, residents a relationship. It was their submarines and uncensored boxes, and we have locally out in Langley Oats table layouts and position it out. Moakley Out was created for displaying blog's on the pages line. Layout was created for displaying and style text table layout was created for displaying to G data. It's ah, the pages and light financial information or data from spreadsheets. Position It layout was designed for great and complex. The outside when you want to change logic or far marks that displayed on the page, result changing HTML only by CSS, for example, like you care for block on the modern off your page, but you want to display it on top, although some top okay, so flicks boxes actually main idea to provide more flexible way to creates complex layouts for applications and pages it's created were aware, clear way, you know, result. You can ally and items or change space between items. Result like a lot of fans that here for from 10 developers before and so reuse two million terms here like friends box container and flex items. So items name it for excitement because I have flexible and take inches they order or logic off appearance on the page. And so we have some rules that only related to our parents to read books and tenor. And some off rules we have late is only to flex items. Get flagged boxes set of success rules on DSO some here and so regular CSS blokes who used on the two directions like walk and Inland direction while flicks boxes based on they own directions. And from the beginning, it's maybe where complicated, so understand how items displaying on their Web page and I'm advising you to Google Flags Box excess the major and keep its while you'll learn more about success schools because it will help you a lot and a second see share on the summation have flex container. We have flexible items and too much you're since care is a man excess and oral sex is when access started from Maine. Start points hands as on my an endpoint cross exes start from crystal and ends. It's gross extra demand. Access is our primary line. And so in defines ever since so well, it's just fines flex direction, and it's on our example on this image. It's horizontal, but it's can change the direction. Base it on Se Jin's that you adds to your container. And so cross access is actually all this related to my an excess. And this is separate particular. Lyons a man access. Okay, I sink. It's a pretty enough for this example. Have a nice day. Bye bye. 3. Parent Properties. display, flex-direction, flex-wrap: okay, we'll start or Joanie from warming or participated, too. That's about something and actually fired and also image related toe flex access. It's a simple Russian, and I hope you'll be able to use it during learning flex box model. Okay, so flex books container extra to have seven man properties, so display flex directions, flex for up flex flow, justify contents, line items and line that stuff from this place displays one of the major schools because it's actually defines sex dinner. And it's a future you can home off. Let's box my city is this role and just play half Moors in just a few years. But we actually need only flags and flex more. So if leads defines how Etem ruled backed into one and the next in line. We'll display each flex item into a new life. But it's a tricky because, remember, the box has their own direction. So for the fold, Satan, we can't for for the full direction we have items backed into one. But if we'll change for X box direction, our line will begin to calm, you know, So you should remember. Okay. Oh, flex directions on flags, directions. Actually, define how are items will be displayed into our flips box and tenure and flicks Directions , money, blades, the Man XX. And it's fast for years. And so it's the fault. Satan. It said that items will be displayed from left to right role. Reverse instead will display items from right to left. It's in a row. Bods. It's displaying icons from top to the bottom and spelling they're yours to stay items from bottom to sit up here. Also examples all college lives. So this part is for you. This part related to this column and sparks. It's a cult. Members Well, so few examples and l shows on a bit later because it's about some other rules. So you have that yes display example. We have flexed direction. Example. All next rule Ihsaa flex up, and it has three wells. Rob, Rob and operators Flex Rob defines you know how how your items well feeds Mart fits into one blind. So, for example, if you care for before items, have some worry more. This is that we have for container. This items can be still appeared in just a slime. All moved toe inter next lines and this actually can be manipulated by different. So if you said no Rob and this is false section, all items will bear all this heads into one. When you said to drop familiar, it's well, give your ability toe move items in the next line and the order off items will go from So I left Born are in so bottom right? But if you'll use for uproars, items will be flexible and we'll be able to split. That's a few lives, but Order will start from bottom. So second line is numbers like second line. Then we'll go into our first line and play next. It's on it to be tricking by to get it. I'm not sure on that symbol. Yeah, this is actual example of it. And we'll rex this lesson later. It let's slow, all right. So reads well, because it's actually short duration or for two off major styles. And so it's have to Dallas. So flex flow. For Australia, it's absorbed flex direction And second builder was a short cancer related to flex and default Certainly roll and more rock. Okay, I think it's pretty not for this lesson. It's in 34 time. Bye bye 4. Practice lesson. display:flex;: all right. A sangria on air and said now will have practices and to split flights so you can see we have a very simple court. But a simple structure here on DSO Main is our It's like something there and do response in Bob is our flex item. And so here was said 1,000,000. Despite Flex. And this is our major rule for this example, all other girls are mounts importance. They just, for example, And so as they remember, we have two rules for display related flex and lipes or flips. What? The changes to flex and life on a suit. Princey. Not a lot off since Change it on our example. But so what? We'll see, Feel it more boss here. Let's add a second. So and so is this is how flex and line works So each exciting actually to take a single line and said, Change it to flex. And this is how flex ocean works So off our blocks go to the top left corner and said despite its in MMA one line, actually. Okay, I think it's pretty enough for this example Owners they Bye bye 5. Practice lesson. flex-direction: All right. This is our breakfast radio on. I'll show you call for next election. Works for ex items and a seconds who have man on This is our flex contender and sections. It's our flex items. And so right now we set this place flicks on Flint's direction Roll. It was actually a default trader. I simply remembers that, sir flicks direction here for four values on. So right now we'll see how this rule in change, order or appearance. Psaltis items. So let's change toe. There are real gross. And right now our items order off. Our items goes from left to right. And this is our my an excess. And so when we change to roll rivers, we change our so different directions. So actually, our item, sir, right now, going from right to left. And you can see it here, right, The changes to call him. So our items this changes will go from it was a bottom right and the changes to calling the wars it's off. Our items actually changed again ends right now. So it goes from the bottom to the top, and this is separate the importance and very handed to use so you can change a lot of sense . Your layout. Is this directional? Okay. Isn't that some awful this example Thursday? 6. Practice lesson. flex-wrap: Gate. This is all practice lesson. Toe loom Hall, Phoenix Roberts and, uh, we have read dissemble Lie out here. So man is our let's smoke. Some dinner and sections are our fix items. We have displaced legs and right now we said Flex rapport rapper goes, I'll explain its later. Why would start from zero? Also shows that you more that flex rob have only supercilious lock Rob No Well and robbery . I also wanted to show Is that we said next year is all sentence ends. We have life. Yes, Rolf, Let's shrink and flats raises here another important role here our memories and reset it to a certain percentage. This is a very important part because us understand. So we cannot so fits all five elements into one line and, well, actually later, see home our rob works. And, yes, we started from robbery wars and a second see our items goes from left to right from second life. So it's so there's lying on DSEC. The changes tow rope. You'll see hards dramatically change order off our items. Yeah, Rob is actually default prevention for this example, and all items goes from the top left corner and survivals from left to right into second line. The changes to know Rob and since actually show you is that it was said Felix were up. Well, you know, rob item, sir, cannot be words into the second lights and you cannot write it. So actually, all items go center first line. But the sermon with this is really began. It fits all off this item center once room, you can sit here. Okay? As it gets bright enough for this example, I understand my bike. 7. Parent properties. justify-content: all right. Waltz continue and assessing with Warren. Next property is related to six books and and we'll start from justified country. Justify pound is so very important. And so it's also help you, Teoh manipulate that box items and so all items will be. That's mom's access. So it's going for six whalers and so teleflex, dark flecks and center space between space around space. Next start said little fell pewter move all items to the start. It was a lot, so items will go from left is the right. Let's end. You're back on Lee items going from the angel's so your items will go from arrived. He was left, sends or will send all your items with free space. Most of sets space between items are evenly distributed and source item. Go to the start point I lost. I didn't go through the end. Space is a bit tricky where items are evenly distributed in the line. You speak roll space on both sides, and it's a little a big, strange but Justin measure. You have a first items along on its face free space unit before I I don't have a free space unit after, but we'll have also second for space units related to second. So between forced Adam and second, that will have to through space units. It's maybe hard to understand, but you won't see it. Dunn's image Space Kinley It's, uh, trying to Fitz Space around, actually, and items are distributed by some world that spacing between any two items is it. Let's walk to image ends. We'll see how it looks. So consumers have flex start. So first example, let's ends are seconds. Example. Center is our self example. Space between our forces. Example on space around this are a gamble. We'll also have a breakfast related to justify content. Maybe a few, but so till there I miss later. Okay, let's go to the next and next year, says Roll. Let it to. I learned about something. There are one items and you for justify content. More manipulate items binds into man excess. Align items instead. Connected to cross test, he's got form stuck to the bottom for the fall direction. Okay, along items his five days like that start let's and send a baseline and stretch. So let's start well defined. How items we'll go from the top off starts important or for across exits. Flex and feel defined. How items are displayed runs a model off processes center, ultimate censored at school. Sexist baseline items will be aligned so contents will manage content off all items. Film age one based on and straight shoots will for all items that we fell in line. Not not so important words besides a, well, strange them. So is it. Each item real started from the beginning, off across excess and a little bit finished adds a modern off sexist. But yeah, there's no that search to respect me. And this and this. Let's go and see a cultural same example. So let's start again. Girls excess for defaults or direction from top to bottom So it looks that will go from stopped in port. Is it ended? Let's end instead, going from point center. It's excess. Baseline issue conceals a fair, different space and before, but always a meet the same baseline and stretches actually stretching or items form topped is about him. Yeah, we'll have also practice lesson related, so learn more involved 8. Practice lesson. justify-content: All right. Um, right now we have breakfast and so real long colleges to five constant works. We have our main attack and this is our flextime dinner and our sections. This is just our flex items. Each of section have future big sell sarees. And so, as it consumed my off our items right now, make it to the top left corner. And this is because we said justify Contin flex, stop. He also said display flex and so is notice. It's at sections we have short 10th next this all three items So flex growth yet shoot and flicks basis says here this example just march on how free space distributed force alliance on our content. So let's change our value on just to find changed the space between Is it consumed? We have for a lot off free space in between each of items marked, So we actually don't have a lot off, uh, through space before forced item ends. Afters lost that. And so let's change it and change it to England. Right now we have a different position. So each each side's off elements have similar space, and so is this. Space is have sandwich Selves. This this advances. But it was a real changes. Yeah, it was said to space, alarmed and conceived have, like one. It's office here. And so too is here, here and again. One. It's here, and this is because space around change it. So the camp, each item on the child and hear from both sides. Similar space on this base actually account for first item on the second changes to flex sense don't show is that all of items actually goes to the top right corner. And so it's not a lot off to talk here that changed again to center. Our arguments are absolute. Make it to the other marks similar space in before first item after the last Yes, and did some awful this example, unless they 9. Practice lesson. justify-content: all right. I saw from Air and says, This is our video related toe practice and today I'll show you a good example about how it's to fight wars. I have a few breakfasts essence about justify answer. Oh, this video will be simple bots. I really like this example because it's actually show how easily you can manipulates items on Let's So we have, like something and is this. Our list and list items are actually our yes items. And so we said, it's here. Spoke, selects and flood slows here, Orel. So you felt change size of our screen. You'll see how items going to the next and next lines. And so seances for flex item, actually not where ordinance and just Forces example and justify constant spacer. Let's jobs is window bits, and she'll see how strange bid. But it's actually space around for, so we change size. And so when our six items cannot feeds at first line, it's just both his next life. But while it's ah, only one item won the second line, it's actually gets a space, informs left and try. It changes to its young and right now office. I will go to the second line, and this is in sees a most of space in here, kid. Well, Dr It again and next item I actually go to the second line, and right now we feel like three columns. Whitened stand considers the orders. Here. The changed again ends. Right now, we'll have short line. So each line on the two items and this is our out. We can actually change it like more more challenging parts. It'll just go through the reservation. Okay, I said it's an officer's example. In this time my by 10. Practice lesson. justify-content: all right, as in Grenada. And today I'll show you. It's a simple example, but it's actually illustrates how powerful fits boxes are. And yesterday will have a bit strangely out of my face and this video. But oh, that simplicity. So what we see here we have only two lemons on the page have landed on foot this notice that we don't have innocent between system debts and surely this can be created by just a few. Since that's the rules. As you can see here we have said Split flex. And yes, it said, Colin flex direction. So actually goes from top to bottom and we change. Justify content to space between. So our items don't have a lot of space at the top and its bottom bots a whole free space distributed Teoh center. Between that on, this is pretty, but this is can be used most only afford to stop if you criticize it eventually to see that it works. Raid formal. Okay, I think it's an office. This example in this time Bye bye 11. Practice lesson. justify-content: all right, this is our practice, Medio. I'll show you how to create a simple ambition. Tomorrow is and the media. So I'm pretty sure you see a lot of upsides with your structure. So we have together and for mineral it's on. And so, Mr Boxes, it's really isn't a great and this'll example is actually no, just for this stops Russians. Besides, it's also supporting mall. And so right now you can see we have wine and just on his lost motivation. And we have four teams and all this looks are actually started from so bright or no. And so this is just a basic styles for navigation, as you can see also have prefixes here. So it was said effects way said six floor role and justify content flex and and this is what is C extra. So if it amends this line, kneels changes at the appearance off our menu items. They also have some spacing between and limits why it's does it conceal. So it changed. But this much importance. There's this example, if you consider for immediate business and just me wards for it. 800 pixels on every change, unjustified hunting for our flex items are to space around, and that's Texas, and this is how it works. So before we have small space in between items stands right now, you can see the news items have same with about spacing between. These items are actually and so on. External magical arreaza modes, more smaller screens and some change looks. Floor two column. So, actually, right now it's a role. We change it and really change some some classes, some rules for links and led shepherds. Our hopes besides, in my window end, this is his changes. So we get right martyrs and our links going from top to bottom and it the item Take all the space and services for our links. Also, tape over made in space. Okay, I think that's enough for this example. Since before time, my my 12. Parent properties. align-content: all right, align content is are the latest since this room related. So that's most and it gives ability 2 50 box items to fill the into space by different logics. And this is rule applied. So all elements inside and it's similar to justify content and it's a line. Do the items, and it's a very important role. It says. Six developers flex Stark, Lex and center space between space around on stretch. Let's go to reflect stuff on flick start. You should also imagine this that it's remarks, just manipulate items. It's money, blades and like lights. So we stopped or items will be back to the start and let's end, or ones with items back to the end for center lines with centered, intended and space between alliance really bit evenly distributed and the first line will started, forms stop. It's a container, and it also adds based around items will have same space wrong and stretch or items will be strange. It to say all the remaining space off and stretch is actually a default setting. Let's go and see image, and they hope to make more simple food. So we have flexed out and all items goes from top left. Let's oh, items goes from bottom Last call. Center it alliance here. Ah, straight. Should lines here so they actually take more space space between They have some small amount of space before and after lines, but between they have more space and space around item Steph set in my mind space before and after You also theft breakfast example for all these. So And actually this was a loss toe roll related. So contender So what's the next video? Will no one involved rolls relate to do these books items? Okay. Thank you. My my. 13. Properties for children. order, flex-grow: all right at this lesson. Real young Successories. It's Adams, Bennett said. Who's for Flex Container? You're actually apply a sentence to all. Next comes. But what if you want change some of the items inside? Let's continue. Was this a situation? Bomb rules related. If next, Adams are and we have six properties. Let it reflects items. It's normal. It's role for extreme, it's basis legs. It's a short actually ends along. It starts from order, is a greater self explanatory, and it's actually sets in order for your items. Default value for order is, and when you grace, for example, value for it will change. Order off Steny items. So if you have five items and you change some of them to have one, there will be periods after items that wasn't touched. A. And this runs Maybe not very. Is it to understand? But you'll get it later on our breakfast. Yeah, so let's Bolt is an excellent on, and this is X Girl. Fix Girl is important role because there's this whole year. I don't need to be worried about how space at wine will be distributed between inside of. It's actually very cancer room for working on different spin scientists. For example, you have same Tim page since we want to use at this up and move I'll. But you want to change the out for different screens and you should use next when you think about it. So you should think about functions. So when you set sound inflexible toe items, it will change there. Logic off growing. For example, if you have items visa, this surgeon flex roll one, they will absorb offer space, even. But if, for example, you one of items s very flexible, too, until absorb more for space and little girl. And yes, it's a lot of time for from 10 lockers we'll have another practice less and related to school. And it's a spreads just forwards assessing central high. 14. Practice lesson. order: but welcome to our practice. Listen, let's so on there. Spread simple, but sure, a lot of a spirit How can be used? We have se nos for like, something. And, uh, we also have five sections. Is idea This idea is not necessary. But my example More clear, it says yes. You can see the top half like on the sauce. Oh my man video for the sauce to set order Similar to I do off our section So station was Avon Get order one And if it's called on bills is that we have on the to My success fills this role So it's a bottom or not just a no get me success and section, he said. Flex room is X troll the truth and okay, so here we have our items. Let's so Marcin says it, you know? And this in Georgia Off fails. Most section section is a view on one long to for On a second see elements change or go right now. First for section like sir, please. And this is how Ginger order for some off Aikens works. Let's change or there again, and we'll on commends and you said order for protection. It's too in suit. Are elements again? Changes a appearance on right now? This was very important parts because, as you can see, we have section was 81. Section is A to have similar order. Has it been see? First section are actually displayed before second section on. This is how this is the same saying There you go 1st 1st sections that have it's really appear that smell will be displayed before in other sections. Okay, I think that's enough for this example. Thank you for it on. 15. Practice lesson. order: all right, this is our like this lesson, and today I'll show you another goal example about how you can use Lex items New project. And so before flips books are over to this example where very complex to do so before it's can be done like only by J credit manipulations is gone. But right now this fits boxes. We can do it. Is it? So? Let's see called crops. So we have our main container and this is our flex something also elements of his last home . And this is our flats box items we have Simple said like Display flex one contents fridge and hate Philip 300 pixels on DSO for column movie sets. Let's go as a CSS Rules for Colon are not swearing. Yes, sir, just for example. But Germany a great is that we have here. We're important. So you can see for oh, tablet treats its name, its be changed order or one of our items and was another size and change order. One has arrived into and said, I can show you this magic for reason by the sides and items. So it seems here criticizing It's a bit and we changed Order off our item. Yeah, not just change in order. You can actually see how we change the ground off. Item change under. Let's service eyes it again and you'll see. Is it seconds? Column Actually changed their order to ends. Also changed the grounds. Okay, I assume it's pretty enough with this example. Have a nice day. Bye bye. 16. Practice lesson. flex-grow: all right, this sorrow breakfast. Listen little into two. The on call Flex go works. It's our starts. Important men's. It's our first about something and two sections this hour fix items. Spain. We have on there one. Right now it's display flights. The old gold related to sections right now is not just, for example, and let's see how our items will chancen if I want a man. So the first section off our gold and right now you can see that our first section take all three remaining space on this life. Remember Flex, Go zero. It's actually fall trailer, so when you change it to one or more, you actually in my book. But so what if we all come in second set of our changers? We said Teoh. Next girl for second section to AIDS free space changes have been See a second section get old his base that it boss off. The sections feel like not number, and it's equal to one kind of person station, but one's real self before, at some more sections, it's you can see that reads for first and second sections be changed because we add lost three of sections on Zagel number zero, but reads off. Free space is changing and this is is showing if you added or some of icons inside of people, like most. Okay, I said, Is this it? We have it. Almost. Bye bye. 17. Properties for children. flex-shrink, flex-basis: all right at this lesson. Really. Barge lecturing on flex basis properties right off the excitement's lecturing the phone and ability for an item to treat if necessary. Fault is one, and negative numbers are invented. So just imagine some case you your website on your phone and you change. It's from landscape to portrait outside. Extra change sizes old for their elements by default. This is hard selection works, actually. So if it's container size grow, make it your items will align sizes. But if you want to a justice again sad flexion to zero so you're at in subordinate string on changes. Relates it well, take some more time. All our breakfast also called exception. Get our next producer flex basis, and it defines default size, often elements before remaining space is distributed. It it's gonna be when que lend 20% age 150 pixels or five her am or it can be a set, alter or constant, so out determines its looks on Lee on It's a warhead, actually, when you said after its will, So also local call the office space distributed on That's the only way. If you said continents size off items will be base it on Lee by size. Off content insiders this element It's a problem off a constant roles that it's not great you will support right now. So be aware. And before that about smaller, making, same logic. Waas very carts and you can manipulate it only by Edinson Process at an additional sisters rules and it waas heart. No, but right now it's simple and misuse it. Okay, it's a great enough for Just listen on Thursday. Bye bye. 18. Practice lesson. flex-shrink: all right At this example we'll see how the string corpse for all flicks marks items. It's example we have and that it's our flag. Smoke something. There ends. We have perceptions that was have 120. Listen, bitch on Actually, each of our sections are much Wilder's and our main contender. No need to show you this ad for our container border A school, right? You see, sets Our first section is my eyes. Why there and is This is why the command section two. Because it's also just extends the first line. I won't. You can see here our election, you know, remembers your is false said and negative numbers don't work. They just invited the changes to want and see changes. As you can see right now, this flexion cruel our section surely get fits in. So our content it's enable Section two and see consist year most off our sections. Get an inside deflect something What? Simply for a time bye bye 19. Properties for children. flex, align-self: over meaning part is related. So with most Adams, let's start from Flint's in short, and it's combines three. Although CS is rules for a Flex Children and first will you for similar to fix goal seconds said Victory. And so sink Flex bases seconds insert. What is our optional? The fold, say, then, is zero one and better to use is this justice role rather than you're three other slight for fiction into space. It's all made. Your court will know about breakfast. So let's jump. Don't lost that and its name it on himself. A line self is the same, says That's wrong. Is that care for and name? It's a line items, but instead of Satan changes toe all items will by using a line self Re Justin on the one or a few items, and it has same well as us a line items and will not. Oh, it's here, but we'll have a good breakfast lesson showing how line self groups, as you can see on this image, extra for items. And so So, um, I have said in a line self defense. And while all items inside of this container more sensitive stuff and This is how old and self walks all right is this is extra is like the successful writer to flex book smart. So yeah, okay. And as they Bye bye. 20. Practice lesson. Holy Grail layout: alike. This is our practice, lissome, and today I'll show you. I hope to build Teoh, mogul Almonds and mosque to use it along the outsides of it's called Holy Grail. And I'm pretty sure you see a lot of websites is a structure Heather, we have to send Mars. His name's said one, and I said to content in the middle and bottom and actually is this is more just it's no professionally out. It's more Valerie and Mobile is actually the first Russian off. Is this out? So I can see use this criticizing. So this is actually our main structure. If you compare this structure with such familial, she said, We have doofus class rapper and this is our flat spot. Something there and all items inside I should it let's box items. So what? The article said side and further is our next items, and so are fewer sent off sizzles. Uh, here. So you said the split flicks, he said. It's little role, Rob and we said next room for old from its items. But in order to make this layout working groups for this stop tablets three said this first , so we create magic weary and said aside, flips one and alter why we do this. As you can see, we have your sides together and it are situation, Boss said about a staple whole free room and space said each lines. That's when you change this. So all in exchange Israel sees it or a science actually taken most same line and the each reads, That's life. Call for it. And if you drive it a bit, you'll see what I mean Actually had their content that foot there still have on Sunday with both sidebars, didn't and is this is why we add more rules. Actually, the Antonovs with major military for, uh, tablet on big screens and we it's a Felixstowe main container. This is our article in this example, and we change order for our flex items, and this is how our layout became this. Okay, I think it's rich enough for this example and simply by 21. Browsers support: okay. Is this lesson a small it so joking about support browsers? And how is that puts the box Use it worldwide. So here you can see you statistic global from, like, perfect sit on mine, Szish for all browsers that going on. And actually, it's good to numbers for browsers from my country. Ukraine consists year. We have a good support. Who's perfect, says and who's out Texas. And actually, as you can see on this breath off major browsers, major vendors, ritual support. That's boxes some of old. Others like, Yeah, on a release mission. Self, Rome or Old Android devices can work glitchy bods again. Major major players. Power. It looks. Boxes gradual. But who's using plex boxes and is This is an example form. Let's job go. And so let's boxes. They actually use it. And, as you can see from their book cost. Renzi's ship forced abortion off stops is a actually, you said to move for from old old structures that they have and use foods boxes. If you're opens, lock on. Uh, you see, use light them up, sister, and you took yourself most this and just get home. This that books so I hope I convince you that letter boxes, a lot of friends. Okay, this is entered this lesson send before watching My, my. 22. Flexbox prefixing: all right. Is this lesson symbology profuse? It's a box model us. You know, some of old devices or old risers didn't support, so it spokes very well. And in order to make smiles, air safety, you need to add some perfect. So girls I display that's on others. But just profusely doesn't just like about Indian vendor name before they're successful. Some some values are or writing, and some rules have a different name. So you not so really need to know. Lord clouds name it, but sur Notre Toe May Europe sides. Well, you should know Bob breakfast. And so if you create, for example, your court from storage, you can use off the prep shit. Several buying, for example. Light is this one said that show you, and it'll at some additional CIA says that you can spoke the best to your file and save it . I can show folks the changes are flex. You see here this and see you or item class for refute soon perfects on for my result. Another way. Where to pressure excess? It's about great and mixing for sauce. This lesson I'll know you should call to create this mix in that you can google some examples on just, uh, I can show you, but looks. But again, it's not necessary to. Okay, so it's not the latest version, as you can see, but it's still work. Swank. So how about you? Makes sense live display flips, lives, balls, one notion. And so Ed and some well us example Lips direction. What is this flow and others? Okay, I think it's enough If you need Teoh, for example, some some samples respect, since you can google them or, uh, take a look at the description and you'll find some things that I could hear about Nixon. Okay. Thank you. Bye bye.