Select Page

Original & Concise Bullet Point Briefs

Learn flexbox the easy way

Navigating Flexbox: A Guide to Writing with Confidence

  • Flexbox behaves differently than regular block level elements
  • When display: flex is applied, the flex items are no longer block level elements and will use max-content to shrink down as small as possible without any line breaks
  • Min-content will force wrapping and will use the longest single word within the list for sizing
  • When using flexbox we need to understand how it behaves in order to write it with confidence.

Unlock the Responsive Power of Flexbox for Web Design

  • Flexbox is a powerful tool for web design, allowing elements to flexibly shrink or grow
  • Flex Shrink and Flex Grow are the controlling properties, with default values of ‘1’ and ‘0’ respectively
  • Flex Wrap allows elements to wrap if they don’t fit the container, creating a responsive layout.

Unlocking the Benefits of Flexbox: A Guide to Equally Sized Content

  • Flexbox can be used to create columns of content
  • Declaring a display of flex on a parent causes the children to become flex items
  • Flex box calculates an ideal size for each item that it then grows or shrinks from
  • When the shrink is set to zero all the items will be the same size due to their flex basis being automatically set to zero.

Understanding Flexbox: Exploring Width, Direction, and Size

  • Flex basis can be thought of similarly to width, with the difference being that flex basis of 0 does not do the same as width of 0
  • Flex grow, shrink and basis all control the size and flex direction controls the orientation
  • With flex direction set to column, all items will have an equal width
  • When left on their default settings, flex-basis and width create similar results.

Understanding Flexbox: Using the Main and Cross Axis to Stack Content on Small Screens

  • Flexbox works by having a main axis, which is usually horizontal
  • This can be changed with the flex direction attribute to switch it to vertical
  • The cross axis is then the opposite axis
  • Flex box can be used on small screens, enabling content to stack instead of displaying in columns
  • Justify content is used along the main axis for spacing and will not work if there is no leftover space or if something with a flex grow has taken up all available space
  • Space between, space around, and space evenly are all attributes used for spacing.

Understanding Alignment and Justification in Flexbox

  • Align Items and Justify Content allow for different ways to position elements on a screen
  • Align Items works with individual items, while Justify Content works with blocks of content
  • When using Justify Content in a vertical direction, height must be set on parent element
  • Flex Start positions items at the top, Flex End positions them at the bottom, and Center aligns them in the middle
  • Align Self can be used on an individual item to override the parent’s alignment property.

Gaining Alignment with Flexbox: A Beginners Guide

  • Flexbox does not have a justify self property
  • Align items is the option typically used instead
  • There are other ways to get around this but they are less covered in this video
  • If more information is desired, there is a cheat sheet available with the properties and values discussed
  • Thanks should be given to the supporters on Patreon.

Original & Concise Bullet Point Briefs

With VidCatter’s AI technology, you can get original briefs in easy-to-read bullet points within seconds. Our platform is also highly customizable, making it perfect for students, executives, and anyone who needs to extract important information from video or audio content quickly.

  • Scroll through to check it out for yourself!
  • Original summaries that highlight the key points of your content
  • Customizable to fit your specific needs
  • AI-powered technology that ensures accuracy and comprehensiveness
  • Scroll through to check it out for yourself!
  • Original summaries that highlight the key points of your content
  • Customizable to fit your specific needs
  • AI-powered technology that ensures accuracy and comprehensiveness

Unlock the Power of Efficiency: Get Briefed, Don’t Skim or Watch!

Experience the power of instant video insights with VidCatter! Don’t waste valuable time watching lengthy videos. Our AI-powered platform generates concise summaries that let you read, not watch. Stay informed, save time, and extract key information effortlessly.

when we use flexbox sometimes it'smagical and it just works and does whatwe want it to and other times it doesn'tquite do exactly what we ask it startsdoing some strange things and it can behard to understand exactly why you startthrowing some alignments orjustifications on things to try and getthings to behave the way you want themto and that doesn't work exactly how youneed so maybe a grow here or a shrinkthere will do the job or what about aflex basis but i mean what is flex basisanyway well in this video i want tosimplify flexbox as much as possiblewith some realistic situations that wecan use it in to really understandwhat's happening so then you can startusing it with confidencehi there my friend and friends andwelcome back to yet another video i'm soglad that you've come to join me onceagain and if you're new here my name iskevin and here at my channel i hope youfall madly deeply in love with css andif i can't get you to fall in love withit i'm hoping to at least help you beless frustrated with it and flexbox isdefinitely one of those things thatwhile it's magical and i'm super happywe have itit can be very frustrating at times whenit starts doing some strange stuff so inthis video we're going to be looking athow it works in some practicalsituations that you might run into on aregular basis we're going to break downwhy different things happen when we useflexbox and really understand theimportant parts of it this is not goingto be a full-on let's learn every singleproperty and value possible in flexboxvideo it's a let's learn thefundamentals of flexbox and the reallyimportant parts and how to think whilewe're using flexbox and the types ofsituations you'll run into most oftenwith it and really understanding thebehaviors that are going on with it sowhen you run into these situations youhave that control that you want and theunderstanding you need to write it withconfidence so we will be looking at acouple of different examples but forthis first one we're going to be lookingat a navigation which is a very commonand perfect place really to be usingflexboxand it's really going to help usunderstand a lot of the differentaspects of it and then we're going tojump into another example after thisthat goes into some other situationswhere you might use it and in thisexample we have i have some stuff onhere to help visualize so all of my codewill be just up here on top of thatbecause this is the really importantpartand the first thing is i have my navlist here and my nav list has thesedirect children which you can see i'vehighlighted with different colors herejust so we can really understand and seewhat's happening and so what we'll do islet's select that nav list first navlist and we're just going to throw adisplayof flex on thereand with that they all just magically gonext to one another but of course thestyling looks really ugly so let's justdo the typical thing we do on lists of amargin of zero padding of zero and alist style of none very quickly on therejust to get it to look a little bitnicer and there we go we get all ofthose items going next to one anotherbut we're here to understand what'shappening with flexbox and there'salready some very important things thathave happened that a lot of people takefor granted when they're using flexboxand so let's turn off my display flexfor a secondand so we have these allies here and thelis are block level elements so theystack one on top of each other and theystretch to fill up the entire space withtheir width of autoand as soon as i do a display of flex onhere what's actually happening is allthe block display block stuff just goesout the window these are no longerdisplay block these items are actuallynow flex items and they're behaving likea flex item so if i actually came downon these and we select them so we'll domy nav list liand i say this is a display of blockabsolutely nothing will actually changeover here i could change this to inlinenothing will actually change there nowif i did a display none they woulddisappear but if we try changing thesetypes of things inline block same thingthat would have no impact on theseallies anymore because these are nolonger these allies they're they're flexitems and they're going to behave like aflex item which is one of the thingswe'll be talking about more in thisvideo so we're going to need to do somestuff on these li so i'm going to deletethis but i'll leave this here for nowand we don't really need to see thatlet's focus on the css for now and theother important thing that's happenedright now is because they are flex itemswhat a flex item wants to do is it wantsto be as small as it can possibly get towhile maintaining everything on one linethere's a value which is with intrinsicsizing so let's just do a width here ofmax content and what this is doing let'sturn off my display flex and now thingsactually look very similar they're stillblock level elements so they're stillstacking in this case but they'vereached their max content which and sowhat this means isif there's text put all of that text onone single line you're not allowed towrap and that is now the width you mightbe wondering is there a min content andthere is a min content which is going tochoose it's going to allow for wrappingit's going to force wrapping and it'sgoing to use the longest single wordwithin there um and then so that becomesthe min content and both the min contentand max content have a role to playwithin flexbox which is why i sort ofwanted to look at that but let's turnthis back offand so when we do our display of flexit's going to that max content intrinsicsize for these items and it's shrinkingthem down to as small as they canpossibly get without any line breaks ifit can fit that within the parent andyou can see here the parent is this bigorange box it can easily fit them allwithout any line breaks in that area soit does just that but if it runs out ofroom it's allowed tocreate line breaks as we can see here sowe have no line breaks and then as soonas we run out of room these will keepsquishing and keep getting smaller andsmaller and smaller until here where nowwe get some overflow because we hit thismin content size that we have rightthereso it's it tries this is the ideal widthit goes we want the items to be the sizethis max content size but if we don'thave enough room in the parent thenwe'll allow them to actually wrap theircontent inside of there and as we'regoing to see in the second example thisactually gets really important and thereason it's allowed to do that isbecause we have properties called flexshrink and flex grow and those areproperties that are over here on thechild and an interesting thing withflexbox is the children have a lot ofcontrol over the different behaviors andthe different things that are going onthe parent sort of sets the ground rulesof how general you know this is sort ofhow i want things to behave and then thechildren are what really get a lot ofthe ultimate control and how the layoutends up working and as i mentioned wehave a property called flexshrink and the default for flex shrinkis one and this is really what givesflexbox its magic and that's because ifwe didn't have flex shrink let's turn itoff and we can turn it off just bythrowing a zero on there and if wedidn't turn off flick or if we had flexshrink that was turned offand we shrink this down it's actuallyjust going to immediately overflow sothe items are getting that intrinsic maxcontent size but that's the size theyare and they're not allowed to shrinkfrom that point if we turn it off and ifthis was the default in flexbox it wouldactually be very very frustrating to usebecause we'd pretty much always beturning it on to get that behavior nowjust to help space things out a littlebit i am going to come up here and add agap gap is relatively new to flexbox butit just helps us add some space betweenthings which is super handy and superusefulso it just helps visualize things a bitmoreand what i'm going to do next is asmentioned we have flex shrink but thereis another property called flex grow andso let's throw that on there flex growand the default for flex grow isactually zero which means don't grow atall and interestingly enough as long asany of these is bigger than zeroit will be turned on and it's a ratioand how things are growing and shrinkingi'm not going to get into that in thisvideo because that's a little bit moreadvanced and again i want to keepflexbox simple and just reallyunderstand the behaviors that you'll beseeing most of the time and not runningthrough every possibility even thoughplaying with these ratios can be usefulfrom time to time so the default here ismy flex grow of zero but if we throw agrow on there they're actually allowedto grow and get bigger and to figure outwhat that space is we'll put it back tozeroand within the parent we have all thisextra space that's left over on the sidehereso as soon as i do a flex grow of onewhat it's doing is taking that leftoverspace and it's equally distributing itbetween each one of these lis as imentioned you can have different flexgrows as long as the ratio for all ofthem is the same it would evenlydistribute it but if one of them had adifferent flex curl on it then it wouldchange that distribution but we're notgoing to get into the nitty-gritty as isaidand so yeah the flex grow allows ifthere's space to grow it's going toallow them to grow and fit that spacebecause we also have a flex shrink onthat means if we have lots of roomthey'll grow and if they don't have alot of room they're allowed to shrinkand they're allowed to squish down butwe of course run into this issue withhaving overflow when they can no longersquish down because they've hit thatintrinsic min content sizeuh type of thing right thereand so there is one more thing that wecan do and this one is not on the childthis one is when we come back up to theparent and i'm going to talk more aboutthis parent-child relationship as we gobut we're going to set here a flex wrapof wrapand what this means is items are allowedto also wrap andand do some interesting things so herethey're allowed to grow so they can growthen when we get to the smaller sizesmaller size at one point we get to thispoint and then they're going to run outof room so there's two things that couldhappen they could either continue tosquish or they could wrap because i'veturned wrap on the default here is nowrap and this is a bit of a weird onebecause it's one of the strange oneswith flex with css where there's nohyphen and it it just is what it is uhbut usually if you're declaring a flexwrap you're just putting wrap becauseyou're changing away from the defaultand so then what happens is they'reallowed to wrap and notice here how it'swrapping and they go and they wrap downlike that and they just do what theyneed to doand there can these bottom ones arecontinuing to grow a lot and you'llnotice the growth behavior on each rowis independent from any of the otherrows because with flexbox each row isvery in it looks at that row on its ownand they look at their ownrow of content this is two columns soi'll distribute that space evenly thisis two columns but they're different soi'll distribute that here when they haveone column i'm allowed to grow i'll fillup all the space this is one of theareas where flexbox is different fromgrid but we're not worrying about gridtodaybut then what happens is eventually theitems no longer can wrap because there'sjust no more wrapping that can go on andthis big guy he needs to keep shrinkingso he's allowed to shrink down and thenwe can grow and shrink in that way andyou can sort of create a nice responsivetype of thing here now if it was anavigation i would actually have flexgrow off on this normallyi wouldn't bother with it we wouldn'tneed the flex grow but you might throw aflex wrap on there so you don't need toworry about anything else and then youhave this navigation just with a displayflex and just with a flex wrap whereeach item is the size that it needs tobe and then as it shrinks down if theyjust wrap down and do their own thingand this time because we've turned offour flex grow they're not growing andstretching across anything they're justwrapping down doing their own thing likethey need to and if they're too big forwhatever reason they just startsquishing and smooshing down so when wedeclare a display of flex on a parentthe children become flex items and it'sonly the direct children that become theflex items and each one by default willcreate a column of content and they alljust go next to one anotherand of course that can be useful whenyou need columns on something as well sohere let's go take a look at this i havethis div class of columns here and theninside of there i just have these threecards that we don't need this gradientshadow this is from an old demo that imodified and i forgot to take that classoff but there we go we have a parentthere with three different directchildren in there so as you might beable to guess when we do our displayof flex it's going to create threecolumns and they go across and let'sthrow a gap on here of two rammed so wecan visualize and see a space betweenthem and this is one of those areaswhere people get frustrated with flexboxbecause they go i want three columnsthey do a display flex and then they getthree columns but they're not what theythought because if you notice they'renot all the same size so why is thishappening why aren't all these columnsthe same size and this comes back towhat we were looking at in this exampleof that ideal sizethat it wants our items to be and inthis caseit wants all the items to be as long asthey can be without any line breaks andthat's where flexbox always starts itcalculates that ideal size and then ifit needs to grow or shrink or dowhatever it needs to do to get contentto fit it takes that ideal size as itsstarting point and figures it out fromthere so if we look here what i'mactually going to do is let's come andturn off my shrink so we're going to saycolumnsand i'm going to select the directchildren like this i like doing this sowhatever is the direct child of my flexitems i can control however i want soit's just selecting all of my directchildrenwhich just happens to be these threearticles and let's do a flex shrink ofzero on there to help us betterunderstand what's happeningand so without the shrinkagain we're going on based on thelongest line of content so that's theparagraph that was hereis pretty much defining the size of eachone of these but this last one has a lotbigger of a size because it had a biggerparagraph or a longer paragraph therewas more words in there so it'sstretching that out across that singleline first flexbox is calculating howbig each one would be without the shrinkon it and then it's coming in and it'sadding that shrink in so what flexbox issaying is i want all of these to betheir ideal width and just to helpvisualize what's actually happening herelet's come and add a border here we'lldo a border of 10 pixels solid uh we'lldo firebrick firebrick and and you cansee that this is actually stopping herebecause it's wrapped in a containerthat's holding its max size but just youknow let's just say width800 pixels just to really clear thingsup and you know we've locked in a sizeit's thereand so when we do our display of flexhere it's going all the direct childrenare now flex itemsand there and then it calculates theseideal widths but now flexbox looks at itand goeswell i don't want themshooting out the side like this theydon't actually fit so with that defaultvalue of flex shrink it's shrinking themall down and the important thing withboth flex grow and flex shrink is thatthey're ratios of growth and shrinkingthey're not fixed numbers and becauseit's a shrink it's a ratio of how muchit should shrink by if something issmaller in its ideal width it's going tostill be smaller once we get to itsshrunk size those ratios are still goingto be maintained even though it'sshrinking or growing and it's not tryingto make even columns and actually ifyou'd like to go further into the mathand how all of this is calculated i'llput a link to a video down below wherei'll put a card up here it should bepopping up that goes into this behaviorin more detail and actually shows themath behind all of it and how it'sreally calculated but again i want tokeep things simple for now and i justrealized this says flexbox versus gridand flexboxmade simple because i forgot to updateit from that last demo that i mentionedthat i was working on umso yeah these go they shrink at the sameratio now one wayand of course sometimes you want theseto actually be equal columns and so onecommon solution you'll find online isputting a flex one and when we do thatyou can see that they all balance outand become equal but why is thishappening this is a really reallyimportant thing to understand withflexbox because it's really fundamentalin the different things that are goingon and for you to be able to like if youwant to use flexbox with confidenceknowing what this is doing is so soimportant and this flex shorthandactuallyaccepts three different values becauseit's a shorthand for three differentthings but if you admit it but it allowsyou to omit the other ones and so whatit's actually doing when you say flexone is the first thing it's doing thefirst value is always your flex grow soit's setting the flex gro to oneit also has aflex shrink on hereand it's just leaving that alone it'snot changing it but one thing that it ischanging is the flex basis and thedefault flex basis is actually auto andif i put that back to auto you can seewe go back to that problem that we werehavingand when we omit the flex basis from theflex shorthand here for whatever reasonthe spec says that this auto shouldactually be turned into a zero and thenby putting that to zero they all becomethe same thing and that's that's kind ofweird right that like why would flexbasis zero actually do thisso uh let's i'm just going to deletethis and we'll stick with the long handfor now and what let's let's turn off myflex grow and put a 0 on there we'regonna turn off our flex shrink and putthat to a zero as well so we know thatthese aren't doing anything and our flexbasis is actually controlling everythingand so we'll put this back to an autoand the auto as you would assume is justletting things behave the way we sawfrom the beginning because that is thedefault value for flex basisnow if i came in and i said flex basis300 pixelsand we'll see that it's actually settingthem all to 300 pixels and you can thinkof flex basis a lot like width it isdifferent from width but it's very verysimilar and often thinking of them inthe same way is the easiest way toreally understand what's happening nowthat gets thrown on its head a littlebit with your flex direction as well andwe're going to talk about the axis themain axis versus the cross axis as welland that's where flex basis sort ofcomes in but most of the time even whenyou're doing that you won't see the flexbasis have a big impact because of howwe're usually using flex basisbecause you're normally not settingsomething like 300 pixels on it but yeahin this case it's setting the width toall of them to 300 they're not allowedto grow they're not allowed to shrink sothey're all sitting at a width ofroughly 300 pixelsand what's interesting with this is umif i set the flex basis to zero pixelsyou'll notice they don't actually becomezero pixels and this is one of thedifferences between width and flex basisbecause if i came on here and i saythese have a width of zero pixels theywill actually go down to zero pixelswidths and we just have a bit of paddingthat is left over on themum by default also with the flex basislike if i put this back to auto they'regoing to look exactly the same right nowjust because the the auto value here isgoing tolook at the width anyway so if you'reputting one or the other uh you knowjust setting a width or setting a widthon top of the flex basis this will havea big impact so usually you're using oneor the other and not both of them butyeah the width 0 will actually make themzero pixels and again it's the paddingthat's showing up there whereas a flexbasis of zero won't actually go to zeroit's going to go to as small as they canit's that min content intrinsic sizeagain because flexbox tries to make surethings continue to work and they don'tbreak along the way like setting it withthe zero might dothe the reason that flex one often worksis because when you have that flex basishere of zero and again with flex growwhen we have leftover space it's goingto equally distribute that space intoeach one of the flex items so when we doa flex basis of zero and a flex score ofone things will grow to fit thatavailable space and of course we want tokeep the shrink on there just to makesure that shrinking is allowed and thenof course we will turn off this widthbecause it's not very responsive rightnowand then we get this type of thing andagain this is the equivalent to justwriting a flex one which can be a verynice solutionin getting something like this to worknow another way that i often do it andyou'll see in my own videos is actuallyjust setting a width of 100um i just find it a little bit easierand you could also do this as a flexbasis of 100 percent and again flexbasis withwhen you're keeping things simple andyou're not going into edge cases you canthink of them as very very similarproperties andif you really want pause the video nowand see if you can figure out why thisis actually creating equal columns andsee if your this understanding offlexbox is starting to sync inso the reason for it isthe default value is a flex shrinkof oneand if we did a flex shrink of zerothis flex basis of a hundred percent orif it was a width of one hundred percentmeans each item wants to be a hundredpercent of its parent so they're allgrowing and they're all becoming 100percent of the parent which means theyall have the same width so then when theflex that default value of a flex shrinkbeing on gets turned on because they'restarting all at the same size they'reall shrinking by the same rate they allend up being the same size now this canget thrown off a little bit if you don'tif like two of your items have paddingand one doesn't have padding or if thepadding is different because of how thealgorithm works and it's really based onthe content size not including yourpadding but if all the items are thesame you should end up with equalcolumns with either one of these doing aflex basis or width of 100 or of courseusing flex 1 like we saw as well we'regoing to go from this example here andthen we're going to jump back to theother example with flex direction toreally understand what's happening andso when we have a flex direction and oneway that we can set things up with thisand this is one of the reasons actuallyi like using flex direction rather thana media query to declare a display offlexis what we'll see in just a second hereand so here with mydisplay flex we can change my flexdirectionand the default flex direction is a rowand this is kind of weird because wehave you know we have row but we havecolumns herebut remember we're looking at the theparent right now so we're saying thatthe parent is a row and that means themain axis is the row axis so thehorizontal axis and this main axis andwe're going to see your cross axis comeup if you're learning about flexboxyou've definitely seen these talkedabout the main axis is always lookingbased on this flex direction here so theflex direction is row so it means it'sgoing from left to right or horizontaland so we're going this is our main axisand then up and down becomes our crossaxis and this is going to we're going tosee why this matters when we go back tothe other example after so we have rowbut we can switch that to column columnlike that and when we have a flexdirection of column that means each oneof the children is becoming a row sowe've switched the main axis now themain axis is on the column and up and oror vertical up and down and then thecross axis is now the horizontal one sowe've flipped the way that flexbox isworking instead of working across themain way it's working is now up and downso the items stack inside now the reasoni like doing this is say we have thesewe want three columns but at a smallscreen size we want them to be stackedlike this and then what we can do ishave a media query at mediawe'll say a min width ofwe'll just say 600 pixels for thisexample it's just a random number thatwill work for the demo i'm buildingand in here we'll save my columns has aflex direction of row whoops we'll dorow there we go gotta spell things rightfor it to workand that means when a screen gets biggerthan that we become it becomes a row sothe flex direction changes the main axisswitches and then we get these columnscoming in maybe we'll boost this just toa little bit biggersomething like that so here we're at thesmall size it's fine and then we get tothis bigger size and it works reallywell and the reason i like doing it thisway using switching my flex directioninstead of just adding flex here is if itook this off this display flex thosespaces disappearand so then i would need marginsand then when you're having to go okaythey need a margin bottom at this sizebut then we have to turn that marginbottom off and add it in a different waysomewhere else it just becomes reallyannoying whereas the nice thing withflexbox now working with gap and this isin all modern browsers browser supportis not perfect but if you're onlyworried about modern browsers then thisshould work perfectly fineand then we can see here that it worksboth ways regardless and it just alwaysworks and that's just likewhen they added gap to flexbox it mademe so happy if this for nothing elsebecause this is just so wonderful not tohave to worry about changing how thespacing on things is workingand so i really like thatbut let's go back to here to reallyunderstand the cross axis and the mainaxis a little bit moreand to do that we're going to start byworking on the main axis so here we canturn off my flex wrap for now becausei'm not going to be using iti'm going to come back down to thesechildren over herewhat when we're working we're going tostart with our main axis and when we'reworking on the main axis we're workingon just stify contentand justify content will always be yourmain axis so if you change your flexdirection it's going to switch with itwe're only going to focus for now onworking on it just in this horizontalmode like thisso in the default one which is the flexdirection of row and the only timejustify content will actually work is ifthere's leftover space so i'll show anexample of something i've seen come upfor people where it's not working andwhy sometimes justify content doesn'tworkbut let's just start by doing the easyone which is centerand that means take the content andcenter it within the parent so it letsus turn that off really quickly and it'sjust like when we were dealing with flexgrow flexor would look at all theavailable leftover space and distributeit equally so when we use justifycontent it's looking at the leftoveravailable space within the parent andthen it's going to in this case equallydistributed on both sides to center theitemswe also have other things called flexstart which is the default it justleaves it all the way on the left or wehave a flex end which is going to do theopposite and push it all the way to theother side the end of the main axisversus the start of the main axisthey are actually working on getting ridof flex and just letting us use end andthis is something you can do in css gridbut we're not there yet um this isn'treally supported very widely but it's onthe way just to haveend and start which will be very nice tohave so we have flex and flex start andthen we get the really interesting oneswhich aredealing with the spacing so one of themis space betweenand when we do a space between onceagain what it's going to do is it'sgoing to look at the leftover availablespace that we have and it's going totake that space and equally distributeit between each one of my items andspace everything outanother one that we have is spacearound and space around is not the mostuseful one because what it does is itputs an equal amount of space on bothsides of each item but it does mean thatthe space here and here actually looksor it is less than the space between ouritems every now and then i have a usecase for this but it's very very rarethose were the first two that we startedwith but because of these problems thatpeople didn't like how the spacing wasworking doubling up or being half iguess on the outsides they added spaceevenly and space evenly just means putequal space everywhere whichit just becomes a lot more practical andthis is a lot more useful of one yeah solet's justify content and justifycontent works along the main axis andthe issue that i've seen come up whenpeople are using justify content there'stwo one of them is that you know thescreen is smalland so there's nothing to really justifybecause remember it's taking theavailable leftover space on the mainaxis and it's distributing it but ifthese items are shrinking that meansthat there is no space left todistribute so nothing will actuallyhappenanother situation that's very verysimilar where there's enough no leftoverspace is if you do have a flex grow onsomething that grow is going to growfirst so they're growing they're takingup all that available space and sojustify content has nothing to work withand it doesn't actually do anything soif i did this as a then a center wellthey already are centered so there'sright like there's no available space soas far as flexbox is concerned it isalready centered or or if you need spacearound there's no space to distributearound so you just have to make surethat the parent actually has leftoverspace that it's going to be distributingso you just have to make sure that theparent actually has that leftover spacethat it's available to be distributedfor your justify content to work andanother time i see issues come up iswhen the flex direction is changed soflex directionof a column and i still mix these up soif you mix up row and column and youdon't get the right one just knowthere's only two to choose from so youtry one it doesn't work you switch it tothe other one hopefully that does whatyou want it to do i mix them up all thetime still and i use this all the timeso i did my column here and then i did ajustify content center and now myjustified content should be workingvertically rather than horizontallybecause we switched my main axis so nowwe're working up and down but it's notdoing anything but once again there's ifwe look at the box i have on my parentthere's not actually any space for itemsto be distributed along because there'sno leftover space and that's where youactually for justify content to dosomething you'd be setting a height hereso you might you know it's a nav maybeyou're doing a mobile nav or you have avh of 100 on it and it's sort ofoverlaid over everything else and thenyou can come in and actually use thisjustify content and do a center or aspacebetween or whatever it is uh and then ityou know we get the space between eachone of them let's just drop this down to50 just for this demoand yeah now we can distribute thatspace because if we didn't have anyjustify content they're all here andthere is that leftover space here on thebottom and basically because of howitems work where the height of parent orthe height of a parent is usuallydefined by the children inside of itif you do want to use justify content ina vertical way because you've changedyour flex direction you basically alwayshave to give the parent a height and alot of the time if you are givingsomething a height do give it a minheight not an actual heightuh but yeah let's get rid of that we'llget rid of thisand we'll just do a justify contentspace between to leave this demo off atand so when we jump back to here let'scome and take a look and what we'll donow is we're going to look at a lineitems in this example because alignmentof items tens is on my cross axis andthe cross axis means my vertical axis inthis case because i haven't changed myflex directionand it usually comes into play when youhave some items like this that arelonger than other items like these twoso this one is bigger so we can see thatthey're actually all the same height butthat's because the default align itemsfor flexbox is stretch and because it'sstretched they're all filling andthey're all fitting the same size butlet's switch this over to a flex startand then they squish up like thatand so when it's flex start they'regoing to their intrinsic size as if theywere block level elements for theirheights where the height is matching thecontent inside of themthen we have a flex end which as youmight guess at this point pushes themall the way down to the bottom and thenof course a center and people complainabout vertical centering being hard incss but look how easy that is so so easyto do and again this is only workingbecause this item has more content in itthan these two items here if that wasn'tthe case and these all had equal heightsthere'd be no space to be distributingaround here or playing around with sothere would just be nothing that wouldactually be going on but because one ofthem is bigger it gives us this room toplay with and to you know if you need tocenter something vertically becomes veryeasy to do now unlike justify content wedon't have things like space between ourspace evenly because they're working onthe cross axis which doesn't have otheritems on it there's only one item on themain axis so space evenly wouldn'treally make any sense because there'snothing up and down here to space evenlywith whereas when we go left to right onthe main axis and the main axis alwayshas multiple items which is why we havean align items is individual like eachindividual items alignment and thenjustify content because we're dealingwith like the whole block of contentthat's moving around uh we do have analign content but that involves flexwrap coming into it and most of the timeyou won't be running into a situationi'm not saying it doesn't exist and youwon't run into it ever but it's more ofa fringe case compared to your lineitems you're 95 of the time we'll beusing justify content or align items andjust like your flex direction where youmight mix up your row and your columnwith the line items or justify contentyou're going to mix them up and you'regoing to forget which one does which wayyou try one if it doesn't work you trythe other one and you're perfectly finenow one thing that's cool with the lineitems also is you can do individualalignment on like single items justifycontent you can't do that you can't do ajustify i like self it doesn't itdoesn't work just because again we'redealing with a block of content withother things around it whereas withalignment we're dealing with a singleitem and how it's aligning within aspace that it has available to it and soto do that we could choose one of theseuh items in here so let's just come tohere and we're going to say that my uhit's just a card so we'll say card nthchild of two so we're going to selectour middle one let's change thebackground on here so we can see itbackground is pinkand it should change the color there wego and so we've now selected just thisone and so i can choose an align item offlex start and it's going to overwritethat parent's control that it had andit's going to do its own thing where itshould ohalign self i did item we want self andit's going to move up to the top and iwas like why is this not working for asecond now so we're saying on my own domy own thing don't listen to whateveryone else is doing you know i'm i'mdifferent from my siblings and i'm goingtoignore my parent and sort of do what iwant to do and you have all the sameproperties click start flex end centeror of course a stretch hereand you might be wondering can i do thiswith justifyself is that justify self doesn't existfor that reason we were sort of talkingabout before where theuh we'll put this to a flex startwhereit doesn't the justify self wouldn'twork because the justify selves reallyjustify content is dealing with manyitems whereas align items is looking ateach individual one along the cross axissojustify self works within grid and youmight see it come up with grid becauseyou're dealing with how it's aligningwithin the cell that grid is defining wedon't have that within flexbox sothere's no justify self there's otherways to overcome that though but i don'twant to get into that because it's moreedge caseythan what we're covering in this videoand if you enjoyed this video and you'dlike to go deeper into flexbox i do havesome videos linked down below but also ihave a cheat sheet that has all of theseproperties and values that we've beencovering throughout this video so ifyou'd like to get that cheat sheet thelink is just down below for quickreference on how to align things andmove things around it's just a pdf thatwill hopefully help you out and withthat i'd like to give a really big thankyou to johnny adam stewart randy and timwho are my supporters of awesome over onpatreon as well as all my other patronsfor their monthly support and of courseuntil next time don't forget to makeyour corn on the internet just a littlebit more awesome