‫Now it's time to finally learn how to use
‫Tailwinds utility classes to implement layouts with Flexbox.
‫And let's actually start right here in the cart overview.
‫So the simple thing that we want to do now is to
‫place this link here and this part on the left side by side.
‫And then this information should be on the left
‫and this one on the right.
‫So that's something very easy to do with flexbox, right?
‫So all we have to do is to make this a flex container
‫then align the items vertically
‫and then also justify the items.
‫So this is what we do most of the time in Flexbox.
‫And so let's now learn how to do that.
‫So the flex container is of course the parent container
‫of both the link and this paragraph.
‫And so that's this one right here.
‫And so let's keep adding one more class here
‫or actually multiple classes.
‫And so now we start getting that situation where
‫this class name's string is getting really, really long.
‫So that's what some people really don't like.
‫But again, you will get used to this.
‫So, in order to declare this as a flex container
‫we usually do display flex.
‫And so, in this case, we just have to do flex because
‫as we hover over this, we will see that this implements
‫exactly display flex.
‫Then let's say we want to vertically align the items
‫and for that we would use align items center.
‫So, the corresponding Tailwind class for that
‫is items center.
‫And so this looks pretty much the same because the texts
‫have basically the same size and so we can't really
‫see that.
‫But next up, let's also justify the items.
‫So if you want the space between them to be
‫basically divided between all the different items,
‫we would usually do justify content space between
‫and so in Tailwind that is
‫justify and then between
‫and beautiful.
‫So this pushes this content right to the right side
‫and indeed this gives us justify content space between.
‫Nice.
‫and as always.
‫Let's also check out flex box here, which should be
‫somewhere ah yeah, right here.
‫So here is all the things about flex box
‫like the flex property itself, which is what we have here.
‫Then,
‫well now we are back to the beginning
‫but you can check this out yourself.
‫So I already showed you the most important parts here
‫and throughout the rest
‫of the project we will of course learn more
‫and more different things about Flexbox.
‫But arguably the most important things are really
‫this one here, align item center and justify between.
‫And as you could see here, maybe from the auto completion
‫of course we could have used other justifies.
‫Well now for some reason it's not appearing.
‫But for example, justify end would also work
‫and then it would push all the elements there to the end
‫or justify start or really all the other values
‫that you probably already know about Flexbox.
‫Now okay, now let's do the same thing here
‫in the header as well.
‫So making it a flex container, then align items center
‫is items center.
‫And I think that all
‫of these are actually pretty easy to memorize.
‫So now we get here this auto completion.
‫So for example, we could also use Justify around
‫and so this would look like this.
‫So we would also get a bit of space around here
‫but let's again do between
‫which I think is the most common one.
‫And so with this
‫they're just side by side.
‫And now it's actually
‫time to also bring back the username there.
‫So remember how we hid the username like this.
‫So this is what should happen when the screen
‫is actually pretty small.
‫So in a situation like this, like on a mobile screen
‫where we don't have the space to display everything
‫but then at a certain point, for example
‫here at the medium break point, we can show it again.
‫And so let's do that.
‫So let's do medium.
‫And then here we want the display no longer to be hidden
‫but to be block.
‫So display block basically.
‫So that's what we get here.
‫And so as we reach that breakpoint, then let's wait for it.
‫And there it is.
‫And so here now we can really see the justify
‫between class making Flexbox work in the way that we
‫are expecting it to work.
‫But anyway, I just wanted to do one more thing here
‫which is to make this text here a lot larger.
‫So also in this medium breakpoint.
‫So here, let's do text three XL.
‫And so this looks a bit nicer.
‫So if you were to watch this on the tablet now
‫or maybe even a computer, then this looks a lot better
‫but it still works great
‫on a smaller screen like this one.
‫Well maybe except that we should have some space also here
‫but that's easy enough.
‫So let's come here
‫and add some padding there in the X direction.
‫Let's say four.
‫And again
‫you will intuitively know which values to use here
‫as you start using Tailwind on your own.
‫And for now, this is all I had to show you about Flexbox.
‫And so next up is CSS grid
‫so that we can actually build or layout here a bit better.