Examples with Flexbox

[av1v3k]

Hi,

Thanks for detailed explanation with examples.

But, I have seen all examples only using CSS grids.

Can the same examples be showcased with CSS Flexbox too? Why because, CSS grids is not supported in IE-11 :(

[joyheron]

Hi!

Thanks for your comment. I will consider if/how to add something about that to the site, but I'll just answer your question here for now.

It's possible to create the kind of layout shown here with Flexbox, but it will usually require a bit more markup to get the layout right and the CSS is a bit less intuitive and requires more hard coded values. I put together a quick CodePen in answer to your question:

https://codepen.io/joyheron/pen/mdrgWLW

However, I think that depending on what you want to do, it may not be worth it to support IE11. If you are building an enterprise application (like I am), where all of the users are forced to use IE11, then yes -- you should definitely support it. But if only a very small percentage of your users use IE11, you can still use CSS Grid. Because of progressive enhancement, you will get a graceful fallback to a default layout (all of the content areas stacked on top of each other vertically) when the browser does not support Grid. Depending on what you are doing, that may be fine.

[av1v3k]

Thanks @joyheron Let me look into it.