Straightforward guide to Flexbox | Robert Miskimmin | Skillshare

Playback Speed

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

Straightforward guide to Flexbox

teacher avatar Robert Miskimmin

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

13 Lessons (22m)
    • 1. Introduction

    • 2. TheWebsite

    • 3. Flex direction

    • 4. Website 1

    • 5. Justify Content

    • 6. Website 2

    • 7. Align items

    • 8. Website 3

    • 9. Wrap

    • 10. Order

    • 11. Grow Shrink

    • 12. Align self

    • 13. Goodbye

  • --
  • 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

A guide to positioning your content using Flexbox.

Flexbox is a native CSS module used to position your HTML content. This class will assume you have a little knowledge of HTML. It is a step by step guide to demonstrate what is possible with Flexbox. 

If you are frustrated using traditional CSS positioning elements then Flexbox could be the answer to your prayers. 

Meet Your Teacher

Hello, I'm Robert.

My career was spent in the NHS working primarily in Anaesthetics. I made my first website 20 years ago as a hobby and have continued to create and develop since then, adopting the latest technologies. I made my first foray into app development creating an iphone app about 5 years ago but my preference still lies with web design.

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. Introduction: Hello. I'm Robert, Miss Cumin. This class is a straight boat Would guide to flex books To begin with, I'll show you the various attributes of flex books and demonstrate how they work. Then I will put some of these attributes to work on an actual website to create the so called Holy Grill layout. I will not use any other display types, and nor will I use any off the positioning properties. It will be 100% flex books. I hope the class will demonstrate what a great to flex boxes and also how straightforward it is to use. You get the most out of the class. You should already have some basic knowledge off HTML and CSS on the class project is simply to employ some flex books in one of your websites. And you can post a screenshot off the website or even the court on the class gallery. I hope you enjoy the class and I'll see you in the next video 2. TheWebsite: Hello. This is Wikipedia s page on the Holy Grail of Web design. We get a whole bunch of information on the next graphic on what the layout should be. It's a simple three column layout with a header and a footer learned from the left column on navigation content in the middle and usually some adverts on the right. And so this is the layout on my website will take using just textbooks. Here is a screenshot of our sites using just HTML. There's no CSS applied here and here we have the site again, with some cooler added on some padding and margins. The display properties have not been altered on. We've not changed any off the positioning attributes. Finally, we have the three column Holy Grail layout, which will be achieved with a very small amount of flicks books. I'm sure your king to get started, so I'll see you in the next video 3. Flex direction: Hello. I'm going to use Flex Box Two of these three boxes around my screen box is kind, of course, beginning element on your Web site. Here we have the HTML knows that me an element inside, which is three dips containing the numbers 123 and we have some CSS to out some size and color to our boxes. Want to give them a bit of space? Okay, so to move our boxes about, we need to set the display type of the parent container, which in this case used to me an element and said not display type to flex. And when we go to our website on click Refresh oh, boxes are now in a row. This is the default setting for flex books, but it will put all of the child elements in a row. No. One if we don't want him in that role. Well, here on our CSS will set flex direction to cover. No, I'll give you three guesses. What happens when we refresh our website You there in a column like another CSS. We can also have a flex direction off column reverse when in our website, when we refresh the boxes go to the end of the container one during a reverse order. Finally, we can also do rule reverse under no website. If we hit refresh, the boxes will be moved to the end of the rule under in a river. So that's pretty much all there is to flex direction. In the next video, we will space things out a bit. We'll see you there. 4. Website 1: Okay, so I'm gonna heart the flex display type to some of my website in the head of section. We want the title on the links to be in line and we know that by default, Flex Box will put your elements in a rule, which is exactly what we want here. Onda, We want our men navigation or events section on our adverts to be in columns. But the actual elements will be in a role side by side. So in our CSS, if we set our header display type to flex and also how army and display type to flex, then that should put our elements in a rule. Someone on that pitch will hit refresh, and our title and links are now beside each other. And our three million contents sections are also in a room, creating the typical three column layout. And we've done this with just two lines of court, which I think you'll agree is pretty simple. Now we just need to space things out a little bit. Unfortunately for us, the next class is on spacing 5. Justify Content: hello and welcome to justify content in the last class we used Ro reverse on this, moved our boxes to the right side of the screen and also flip the order. Well, what happens if we don't want the order flipping? Well here in our CSS weaken, do justify content and then select flex end. And then when we moved back to our website Andi, click refresh, the box is moved to the right hand side of the screen on keep their order. So what else can we do with justify content? Well, let's select space between and then go back to our website to see what happens with this. When we click on the fresh, the boxes are spread out across the page with space between them. Now we'll go back to our CSS on and slipped space around on bacchanal where pitch will click on refresh when we see that our elements have now got space around them. Unequal margin has been created when I have a side of our books. On this, mix the space between the boxes twice as much on suspicious on the outside. So what if we want our elements to be evenly spaced across the pitch. Well, let's go back to our style. Sheet will change Spierce around to space Evenly back on our website were Click Refresh and lo and behold, our elements are spaced evenly across the page. One final thing to look at, you know, would justify content. We will slipped center on our Web pitch, will refresh under our elements have been pleased in the center. I hope you'll agree that this is all very straight boat. And in our next class, we'll look at some vertical alignment. We'll see you there. 6. Website 2: Hello. Let's have a bit of justify content to our website. You know, I had a section We want thes links to be a cross from the right inside of the bitch on Darmian elements need to be resized and spear. Start of it. So when I had a section movable type justify content, we want our elements to be at opposite sides of the page. So we'll type space between nothing will set the width of our columns. I'm will to five time up 15% 55% on 30%. But because we want a little bit of space between them, we'll take 1% off each elements. And so the navigation will be with off 14%. The me an article or with 54% on and Theus site which has got the advert scene will be a wits off 29%. No, let's take a quick look at what we've got in our browser. If I just refresh the pitch, the links in head of section have moved across to the right inside of the page, which is exactly what we want. No three columns of being resized. They're all on the left hand side of the screen with the spirits over on the right. And so we want thes, evenly spaced. That's right for even spacing. We will put in justify content space evenly. We returned to our Broza. Now, when I click on me, fresh No. Three columns are evenly spaced across the page on. This is looking much better already under part from the sizing we've won, he added. Another two lines of good when someone to the next video, where we'll look at some vertical alignment. 7. Align items: Oh, are said Flex direction two column we can use Justify content to spear somewhere items vertically if I set it to space around back to our website laundry fresh. You live in sure in a column, unless based vertically through the height of the parent element on your justified content attributes. Working to see him Wait here. I have said it to space between Oh, this is flex and and again you can use black start or center. We can also position our elements vertically even if they're in a rule. So I'll do that. Now. Get rid of this flex direction when we use the property. Online items want emotional select center and then go back to the website When I click on Lee Fresh. The elements are in a rule, which is the default setting, but they're placed in the centre off the vertical spirits. We go back to our style sheet. I can change center to flex end Aunt Awfully. We will be able to guess what happens here. My click on refresh The elements are in a rule, but they are at the bottom of my vertical space. Just one final point. If I select a lying items sent it, and I also hard justify content center on, then click on Refresh on My items are perfectly centered in my Web pitch. Not sit for vertical alignment in the next class will learn how to wrap. What's wrong with the W You really don't hear me sing? 8. Website 3: So here we are on our website on. We want thes links moving to the bottom off the header to reposition them vertically. We'll show on Army in navigation section because we have made this a bit wider. The in line elements are trying to appear side by side. You could change the display properties for the in line elements, but instead we're going to use flex box. So it is simple enough to sort out our header section. We just need to out on the line items property on, set that to flex end and then we'll quickly take a look at that. You know, browser. Just click on Refresh on the links have moved down to the bottom off the header section. One thing to note here, the he each one element slope title it's included in the head of section on will also have moved to the bottom. But because of the hitch, one margins, you could looks like it hasn't moved. So let's go back to our style sheet on sort out the me in navigation section. First, we need to set the display type to flex and then simply the Flex Direction two column. That's all we need to do here. So we returned to our present click on Refresh. I don't know of Aviation Column looks much better in the next class. We'll look at the rough property. 9. Wrap: Hello. Welcome to flex Rupp. Seriously, I need a lot more boxes, so I'll copy these three tips on pierced of a few times in, go to our website and click Refresh. And as you can see, my boxes have gone right off the side of the pitch, which is not at all helpful. So to sort this out will type flex. Rupp set it to rock? No, but we go back to your website. Click refresh, no relevance, have wrapped around missing elements are now on a new line, as you can see. There also halfway down the pitch, which is that he fall sitting over up. If you're not happy with this, we can make some changes. This time we use are lying content, not a line item says we used in the previous listen and we'll set that to flex start. We'll go back to your website and click refresh on the second row is now right beneath. The first rule back in our style sheet will change flex start to flex end. And I'm sure by now you're getting the hang of this. So when we click on refresh more elements moved to the bottom off the parent container, so OK, we'll change the line content to center. Would you have guessed it? Look on to get sent it. We can also use the very familiar spierce around. We don't have a quick look at what this looks like. The rules have space around them. Let's not forget space between and our rules are now at the top and bottom of the continua with space between. Okay, I'll just remove this aligned content for no under another flex rap option. Waas, we'll take a look at this on our website. The top row is now on the bottom with the second drawer village and it is halfway off the peach, which was the default option, if you remember. Okay, back in our style sheet, something to be aware off here. I'm going to select lying content and set it to flex. Start now back on our website. If I click refresh the elements have moved to the bottom off the page around on the top when this is because we have wrapped reverse selected And so we are starting from the bottom and so flex start those things at the start. I know this makes sense so we'll just quickly change. Next start to flex end. No. When we refresh now, the rules have moved to the top of the page. You know, next less we will look at flex or 10. Order: law. So far, we've been positioning our boxes as a group by targeting the parent container. What? We can move the boxes individually to here. I've got five boxes and I've given each class name so I can target them individually and in our website. Their number 1 to 5 in a row. Well, I can alter the order. They appear using flex books. So I'm going to target box one. I'll give it another off three. On that, we shall return to the website Click, Refresh, and we can see that our box one has moved to the end of the room. This is because the default value is Cyril saw off our of the boxes of a value of zero. Because we have given box number one value bigger than zero. It is displayed last. I want to prove that I'll give it another of Are you off one? Well, when we go back to your website and hit refresh box, one should still be displayed. Lust Okay, but I actually wanted my books. Want to begin the middle. So how do I do with us? Well, I have to give boxes 45 a larger order number one, so I'll give books for on order value of two. Not that could also give Box five on order volume of two. Well, I'm going to make it three now about the website. When I hit Refresh my box one is in the middle where I wanted to go on. That's it for order. The next lesson will be on growing and shrinking. I'll see you there. 11. Grow Shrink: Hello. When making a responsive website, you might want certain columns are elements to grow shrink at a different writ to each other and this could be achieved in flex box using flex grow on flex shrink its target box one I'm type flex cruel and they give that a value off three. We'll see if this take a look at it. You know, Broza. Now our elements take off the full width of the pitch. The default value for Flex Crew is zero books is 234 and five are all set on zero. So that size does not change box one. Whoever will grow depending on the screen with Okay, now let's target books for and give that a flex grow value off tube. We'll go back to our pros on history. Fresh boxes 23 and five remained to see him on boxes one and four will grow to fill the bitch when they will grow at a ratio of 3 to 2. They will always stay in this race Your relative to each other? No, let's talk it Box five Don't give it a flex girl value off. One not gonna website will hit re fresh boxes two and three still help their default value of zero and shall remain the same size. But now Box five will grow with her. Issue off 1 to 2 against spokes four or a ratio of 1 to 3 against Box one. Sorry if this is getting confusing, but I hope you can see what's happening here. That's it, Reflects grew. No flex shrink Whole Target Box one again type flex shrink. Don't give it a value off. Zero One will go back to the website and click Refresh Unbox Wal this now bigger than the other boxes, Mrs. Because the default value for Flex shrink his one. Because Box one has got a value of cereal. This is shrinking not a slower writ than the others, which makes it bigger not to demonstrate. This will target Box four. Give it a flex shrink value off. Three. We'll go back to our website and hit. Refresh unless you can see box for now, is shrinking much faster or three times faster on the other boxes. I think you'll probably need to play with Flex grow on flex shrink to get the hang of it, but I hope it's me. It's a little bit of sense 12. Align self: Hello. Previously we've looked at a line. Items on the line content. Today we'll take a quick look at a line self in my books. Number one, I will type Align himself. Eventually center. We'll pop over to our Web site and click refresh on the box number one moves into the center. Okay, We'll have a look at the box for type. Align himself. Oh, select flex and pretty sure you guess where this is going? Back on. Our website will click, Refresh and box for is moved to the bottom. That solar is to align self on. Pretty much older is to flex books. I hope it all made sense. 13. Goodbye: Okay, I've just made all my images to see him highs and that's our website. Finished a straightforward Holy Grail layout using nothing but flicks box. That's the end of this class. If you found it useful, please leave a review. If you've got any questions, leave them in the Q and A section. We'll get back to you as soon as I can of about shut the project just to give yourself a little practice with flex books and also look out for future courses. Watch it to me. Thank you. Goodbye.