You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps. If you haven't mastered both of them yet, I highly recommend going through my CSS Course.
Important to understand is that you don't create columns with Flexbox and then put elements in those columns, that's what you do with CSS Grid.
With Flexbox you pick a direction for the flex-items. The default is horizontal (row):
If you have more flex items you will get something like this if you allow them to wrap:
So if an additional flex-item doesn't fit on the row, it will wrap onto a new row and start from there again.
Now let's say that we want to create a 3-column layout here. We can do this:
So to create a 3-column layout we simply have to make the flex-items a certain width, so that each row can contain 3 elements, and the fourth one will be kicked onto a new row.
Here, the flex-basis property acts as a minimum width. So the flex items should be at least 500px wide. After the flex-items have taken up 500px of width, there can still be some available space left on the row.
The flex property determines what proportion of this available space each element should take up. Since they all have the same proportion of '1' (since they all have the same class of 'child'), they will take up an equal amount of available space. That could be any number by the way (1 or 43 or 354325). Since they all have the same minimum width + they take up the same amount of available space, they will be the same size.
Note that on the last row there is more available space left, because there are only 2 elements left. But those 2 are the same size.
By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.
Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.
I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...
So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.
Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.
Also, I show projects of upcoming courses on social media, follow me here:
Facebook
Twitter
Instagram
