FLEXBOX Custom Layouts in Webflow

what's going on everybody and welcome back to another video in today's video i'm going to show you how to change and manipulate the position of elements within your webflow site and if you stick around till the end of the video i'm going to show you how to design this super clean layout using flexbox and how you can implement this on all of your webflow websites now if you're new to webflow chances are you came from a website builder like a wix where everything that you place on your site was just drag and drop and using a tool like webflow is much much different and so what you're going to have to do is understand at least enough code to know exactly what it takes to manipulate the position and the layout of your website and the elements in that website now in other videos we've talked about the box model now what the box model is is something that all website coders understand and know and build their sites around which is this idea that everything is a box and if you break down a site it's all going to come down to a box within a box within a box and so on and so what that means is traditionally or at its most simple form websites are basically the same as word documents that read top to bottom and what we do is we insert boxes to be able to adjust things both vertically and horizontally to make it look a lot more custom and have more control over the layout of the site rather than having it look as plain and bland as a word document and we do this with something called flexbox now in this first example i want to show you what i mean by the box model by showing you that first off this blue background is a box this is a section which everything else is found within now within this box i have different elements like this heading and i also have more boxes like this div block within that div block i have even more boxes which are these div block threes or these small teal boxes now the way that this works is flexbox allows you to set things either horizontally or vertically now you're going to find this over here on the side in your layouts panel and it's going to be the second button over which says flex now once you select flex the box is going to get the ability to either set the elements within that box horizontally or vertically and you can see as i click these two different buttons how it's going to adjust the boxes within them now as i toggle this horizontal and vertically you're going to see that it gives me different options for alignment and also to justify these elements so for example if i've got it set to horizontal and i want to align to the top or the bottom you can see how that affects the elements or the boxes within the main box same with justify you can go left right center you can also split the elements to the edges or you can split them evenly within the box now by doing this you can get them to look exactly how you want so the next question you're probably asking is well peyton what if i want two boxes in the top left and one box in the bottom right within this single box i don't have the ability to get that custom with it and so in my next example i'm going to show you how i utilize more boxes to split up the elements within the site even more so that i have the ability to place them the way i want and so you can see again we've got our main box here and i can set this to my alignment my desired alignment and also my desired justification you can see how this changes as i click these and then what i can do is i can change these inner boxes again with flex to be either horizontal or vertical and then i can set them either justify center right top or bottom and by doing this i can adjust within this box and then by doing the same with the second box i can set it either vertical or horizontal and then again i can justify left right or center now by doing this you can see how i'm starting to utilize more and more boxes to break up the elements and adjust them to the exact way that i want them to appear on the website now again because we can't drag and drop elements we have to use this box model and some of you might be thinking well this seems like it's it has way more restrictions and it's much more difficult to build and the reason that we do this is because it makes it much much easier to make all of the elements on your website responsive and so as you dive into different viewports whether that's an ipad or an iphone you're going to be able to adjust each of these within webflow and so maybe for example on a regular computer viewport things are going to be horizontal side by side because the screen is larger and as you get to mobile you're going to switch things to vertical so that more of it fits within the screen in a clear and more concise way and so by using flexbox you at the end of the day are going to have much more control over the way things look in this final example you're going to see how i've used the flex horizontal to set things side by side and by doing this you're going to be able to again have more control over where these elements fall within the box now this is a really common layout if for example you want to have text with a few horizontal buttons on this side and then an image on this side it's a great way to break things up and then use your alignment and to justify those elements to get the desired outcome now one more thing that i want to mention is as we go a stretch you're going to see how it stretches the blocks the full width and if i do this within this div block as well it's going to stretch these elements all the way to the full height or width whichever you're using now the reason that it's doing this is you can see that this div block does not have a set width or height instead it has what we call a minimum width and a minimum height so what that means is it's just saying that this element at the very least has to be 100 pixels wide and 100 pixels tall now outside of that it can stretch to be much bigger and especially when we're using our align stretch it's going to stretch that much much bigger than those set parameters now if instead we want to come down instead of say i'm setting a min and max width or height we can just set the width like this with the width and the height and you're going to see how that limits any sort of stretch or um distortion of those elements within your box and so if you're playing with this and you notice different things getting stretched in a weird way especially like this happens a lot with images where you set your alignment or your justification and you see that an image is getting stretched double check that and make sure that you have specific sizes set and another thing that you can do is set a max width so it gets stretched a little bit but not completely those are all things that you are going to see and you'll know exactly how to counteract that so finally what i want to do is i want to show you how we use flexbox or how we use the box model to create this layout now this is a really standard but common layout where we've got our header and subtext and then we've got this horizontal list of these different icons and kind of sub ideas and then right here at the bottom we've got on the right side a get a demo button and you can see how these elements are all aligned differently okay and so as i scroll down what i've done is i've outlined the different boxes that were used in this layout to show you just how many boxes are needed in order to get this very basic but custom visual layout okay and so what i'm going to do is on this final section i have laid everything out very similarly to how i explained a word doc looks right just everything is top to bottom i've got all the elements in here but without using any boxes or the box model it's just all going to read top to bottom and so what i'm going to do is i'm going to show you step by step how i can readjust this by using additional div blocks to make it look exactly like this one on the top alright so to get started the first thing i notice is that these two elements look just fine right with this main div block being set to vertical alignment everything is vertical and so i'm not going to have to adjust those but the other thing that i will notice is these individual elements need to be set horizontally across the way so what i'm going to do is i'm going to pull a div block in and for the sake of this video i'm not going to order my classes or name them or anything like that but i'm going to set this div block to 100 percent width and then i'm going to give it a little padding just so i can reach inside of it okay so what i'm going to do is i'm going to start dragging all of these elements in here to set them horizontally now as i do that you're going to notice that something's wrong okay so i start pulling these in let's just pull in maybe two of them and then i'm going to come to this main box or div block that they're found within and i'm going to come over here and click flex and i'm going to go horizontal now what i'm going to notice is it takes every single element within that box horizontally and you can tell by the example up here that is not what we want we want the individual blocks to be horizontal but when it comes to these individual elements we want those to be vertical and so we're actually going to have to bring in four new blocks within this main div block in order to get this look that we're going for and so what i'm going to do is i'm going to come over here and i'm going to drag an additional div block in here now this div block what i'm going to want to do is set the width to 25 and then i'm going to start dragging in these elements so i've got my icon i've got my little subheading and i've got my subtext right here and you can see that because this div block is set over here to vertical this is how it's going to display so what i'm going to do next is i can actually reuse this div block 9 or maybe let's just rename this icons to keep it clear and what i'm actually going to do is i'm just going to copy and paste that over and you'll see that then i will have a new one of those called icons let's copy and paste that over two more times and let me just get rid of these things let me drag them back down here so they're out of the way and so you can see right here that we've got these four icon boxes and those four icon boxes are found within our div block eight and actually if i put a border around them you're going to see them a little bit better so let's keep that border as we work on this so again i'm going to drag my icons up here my subheading and my text same with the third one and the fourth and we are done okay so a couple final touches what we're going to want to do is maybe give a little bit of padding within these just to make sure that they're not touching one another and just like that as i remove the border you can see that we've got our desired look right so we've got these two vertical elements and then we've got our third vertical element which is the div block but then within this we set these four blocks to horizontal and within these horizontal blocks we again set things to vertical and so it's kind of a weird thing that your brain's gonna have to go through is think okay is it are these items within this box horizontal or vertical and if it switches back and forth you're going to have to add additional boxes okay and so again as i scroll up here you can see all of the different boxes that i had to use to acquire this look and actually the last thing that we're going to have to do is this get a demo button and this is going to be a really good example and what we are going to do is i'm going to get rid of this line and you'll see that this is the last div block seven here and what i did is i set the um direction to horizontal stretch and then just a fire right if i wanted to justify left i would just have to toggle this so just like that by using the box model we've been able to organize this layout and get it to look exactly how we want it to now again as you dive into your different viewports for example your mobile i might just want to come in here and grab this main div block and set this to vertical and then what i could do is set these icon div blocks to 100 percent so they stretch the width and just like that i've got the vertical icons for a mobile phone and so once you get this properly on your first viewport it's going to be really easy to go in and toggle either horizontal or vertical and the nice part about doing that is when i come back to my desktop it hasn't messed up the way that i was using flex to begin with and so flexbox is a really really powerful layout it's it's a concept that if you can master you're going to be able to design a site super super quickly and you're going to be able to achieve any look that you want and so what i would suggest you do is dive right into webflow and start tinkering around with your display flexbox because by doing this you're going to get a really really quick feel of what it takes to manipulate these items get them in their proper positions and and you're going to be able to hone in your design skills and before you know it you're going to be able to recreate or bust out any website any design that you can possibly imagine so if you have additional questions on building websites in webflow i have a 45 minute tutorial on here that is super comprehensive it shows you everything that you could possibly need to know to get started in webflow the reason that i made this video is it's much more simple and to the point more so than any other video on youtube or even within webflow university and so you can find that up above click here to watch that video thanks so much for watching and we will catch you next wednesday on our next web flow wednesday [Music] you

Channel: Payton Clark Smith

Views: 2,659

Keywords: webflow flexbox, how to use flexbox, flexbox tutorial, webflow flexbox tutorial, flexbox layout, flexbox, webflow, webflow for beginners, webflow for beginners 2020, webflow tutorial, webflow tutorial beginner, webflow tutorial for beginners 2020, webflow positioning, web design

Id: 8f16-sPIxJ0

Length: 14min 47sec (887 seconds)

Published: Wed Jan 20 2021