Help Needed: Flexbox vs. Columns: When to Use One vs. The Other

[SSLM]

How do you decide when to use flexbox rather than columns?

I’ve been going through the tutorials, game, etc. to get an overview of flexbox. What I don’t know is how to decide when to use flex box rather than columns and vice-versa.

If someone can give me a basic education on when each of these makes sense. [Or…does the flexbox eliminate the need for columns altogether?]

Thanks

[sabanna (Anna)]

Hi, @sstrantz.

Will try to answer your questions.

Situations when Flexbox becomes useful (just a few examples that pop-ups in my memory):

1. You have 2 blocks inside the container (section) set kinda like a columns, one of the blocks has fixed width and another has to be flued width.
2. You have several blocks inside the container (section) with different content size inside of every block. You want them to create the grid, stuck on top of each other and have the same height. Here flexbox can be very useful.

I am sure there are more examples for using flexbox, but I read many recommendations “do not use flexbox everywhere”. To me it means that I will use the flexbox if there is no way to create structure without it.

Regards,
Anna

[StevenP (Steven Victor Sigvard Persson)]

Great reply by @sabanna!
I’d also like to add a few things “vs this vs that”. I tend to use columns (row+colums) for text instances only (when the height usually is flexible depending of the lenght of the text. I often feel I get more control with custom made colums/grid patterns (div blocks with percentage) and now I can use Flexbox instead of my custom div colums. It is going to be a little more easier to set up grid items with Flexbox since you don’t need to mess with height issues (adding % / vh-values manually) when you have various height on your colum items.

My 2 cents

[SSLM]

Thank you @sabanna and @StevenP What you say makes sense.

I think what Sabanna says about not using it everywhere is good advice…
I had a specific page that I decided to remake as an experiment in a site I’m working on. I used Flexbox to keep the footer at the bottom of the page. Worked great on Firefox and Chrome. However, when I viewed in IE (Latest version for Windows 7) the layout didn’t hold.

I know that the Windows 7 is old, but there are still a good number of people using it so I’m thinking that “perhaps” I need to hold off for a bit on using Flexbox for that reason. Do you think that makes sense or should I just forge ahead and not worry about the Win7 users?

Thank you, both, again. Helpful.