Yes
But it is a fairly simple rundown of the basics and I would not stop there. There are some great articles and video tutorials on flexbox. Like I said the top search results on Google and YouTube will give you some good resources to look at.
The more you use it to actually build stuff with the better.
Ok thanks I will have to take a look.
Nahhh grid is better
They’re complementary, and flexbox is designed for laying out elements in one dimension, which is what the OP is currently trying to do
I wouldn’t go that far: display: inline-block is used to override the layout behavior of individual elements as they affect the other elements around them, and flexbox is used to control the 1-dimensional layout of its child elements. There’s circumstances where you might want a flexbox that is itself laid out as inline-block. As for using percentages, that’s the furthest thing from obsolete.
What I would call obsolete are the float and clear properties.
Just to be clear, I’m talking about inline-block, percentages, and negative margin in conjunction to do layout. I was not saying that you shouldn’t use percentages (at least that isn’t what I meant to say).
Laying out a bunch of block-level element on one line by setting them all to inline-block and then setting the width on the elements in percentages based on how many elements there are, plus having to account for the whitespace, is (in my opinion) not a very good approach to take seeing as flexbox already give you much of the same behavior (minus the whitespace issue) and you can control the spatial distribution better. The CSS will be more maintainable and scaleable.
In any case, if you ask me this specific nav layout is an obvious candidate for using flexbox.
I’d put all of the stuff you want side by side and use display:flex align-items:center
But please don’t watch old tutorials, I did the same mistake with React, i was learning classes and it was such a pain and then once i got comfortable with them, i found out that a much much easier approach (functional components and Hooks) was released quite some time ago, so i was learning an old, more complicated way and the tutorial wasn’t even a year old.
How do I add a negative margin to my CSS selectors? I tried everything else you mentioned and it still looks weird.
Blockquote Switching this to use flexbox instead would be a big improvement. Using inline-block, percentages and negative margin is pretty old school and not something you really want to replicate in your own projects moving forward. I would suggest you take the time to learn flexbox. It is the most commonly used CSS technique for doing layouts and it will make things a lot easier, cleaner, and more maintainable.
Yeah the course I’m following covers flexbox after. It’s taught by Joe Santos at CodingPhase.com
Blockquote
I would need to see your current code, your Codesandbox link is not working. Please post a new link with your current code.
you can give a position:fixed to your navbar and give it a top:0 left:0 and width 100% if needed.
If you really don’t want fixed nav you can add negative margin to your header element. Header element that is a parent to all other elements, in your case it’s
margin:-7px should work in your case, but play with the numbers.
One tip i can give when it comes to being confused with what controls what, give elements some sort of visible border so you could see them, that will make your life much easier, so you would understand why your margin or padding doesn’t do the thing you want it to do.
Ok I will play around with it. Thanks.
