Long gone the days of floating and clearfixing. We got flexbox and CSS grid now. You know that kind of feeling you get when you know you won’t be loading any external CSS framework or floating and clearfixing(such a pain in the ass).
I love Flexbox and Grid, however I’ve always find flexbox quite easy to work with compared to CSS grid, I don’t know why.
I thought why not make something cool today with flexbox, the first thing that came to my mind was a pricing table, and I was like why not.
In this tutorial we’re going to make a 3 column pricing table using flexbox and also make it responsive with media query and the flexbox property flex-directionOh shit I just said the best part.
If you’ve never used flexbox before or probably never heard of it. This is not a Flexbox absolute beginner tutorial, however this article still covers some of the fundamentals you’ll need to start using flexbox.
We going to start with the markup, I’ll try to make the markup understandable as possible as I can.
Starting with the .container class
We’re only concern with the justify-content property, you probably know what the display:flex property does.
In case you’re not familiar with it, it basically expands items to fill available free space, or shrinks them to prevent overflow.
We set justify-content: to space-between because we want to set the price-card classe width to 30%, then the remaining 10% will be
distributed among them, in other get that space between them.
As you can see I use the flex-basis: property instead of width. Basically it makes no difference,
but I just wanted to be more flexboxish(don’t google it, it’s not a word).
Changing the background-color for each plan
.top class children: h3, p & span
The ul & li
Bottom section Let’s style the button tag globally
Bottom line for each card
Let’s give the buttons different background-color, notice that I didn’t set a background-color to the buttons when I styled them that’s because I want them all to have that global style but different background-color.