A flexbox "cheatsheet cheatsheet"

I have so many flexbox references bookmarked now it’s not funny (hey, stop laughing). But this one I stumbled on today has gone to the top of the list. It’s a “cheatsheet cheatsheet” by Joni Trythall. It’s a really intelligent, easy-to-follow overview of the basics of flexbox. You can sit with a drink and just read through it and not feel overwhelmed, which is a great achievement.

Here’s the link: http://jonibologna.com/flexbox-cheatsheet/

4 Likes

what is Flexbox?

1 Like

Heh, “flexbox” is sort of an unofficial name for the new CSS3 “flexible box model”. Basically, it’s a really handy tool in our CSS armory, particularly for aligning related items in a column or row. It’s a cool alternative to floating, inline-blocking, table display etc.

Definitely worth checking out. :slight_smile:

1 Like

I see I will check it out.
The pdf version he gives is a little inconvenient :joy:

1 Like

I am ‘crippled’ when it comes to design and have just learned to be comfortable using Bootstrap. So I am curious how Flexbox differs from Bootstrap?
Is it an emerging standard?

1 Like

Bootstrap is a CSS framework—sort of to CSS what jQuery is to JavaScript. So it’s a bunch of pre-written CSS (and HTML) that you can use out of the box, to save you starting from scratch.

Flexbox, by contrast, is just a new feature of core CSS, like float, inline-block and so on. I haven’t used Bootstrap, but I presume it would utilize flexbox properties like any other CSS property.

More like an emerged standard, as it’s supported by all modern browsers now: http://caniuse.com/#feat=flexbox

1 Like

There used to be a really good flexbox in 5 minutes demo/try-it-and-see at http://www.flexboxin5.com/ but it seems to have gone AWOL

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.