Simplest-ever CSS classes for flexbox based layout with notes willfully copied from MDN pages. Class names are loosely based on the SUIT CSS naming convention, but purists may have concerns.
- flex@2.1 : fixes some more mobile safari issues
No, not really. But when you're just starting to use it, the similarity of terms can be an impediment to getting your head around it.
Absolutely. Many, many good ones exist including MDN. Just google.
Easy. When you are old-school, it helps to go through each property and option and see how it fits into the big picture. Then it made sense to 'document' some things in a LESS file that I could use on projects.
These are two different roles that any item (element) may serve in the context of the flexbox model. A flexbox-container is simply an element that lays out its children using the model. A flexbox-item is simply a child on a flexbox-container.
Of course, other flexbox properties can be applied to either the parent and/or the children to impact their display behavior.
In some cases, an element will serves one role, in other cases, it may serve the other role. And there is nothing that prevents an element from being both a container and item at the same time.
The CSS properties that comprise the flexbox model are relevant to one and only one "role" in the sense I'm using above. For example, the property align-items only makes sense in the realm of flex-containers while the property align-self only makes sense in the realm of flex-items.
On the interwebs, I found many tutorials that descrine them in a sort of all-together style. Not sure why this is, and I should point out that not everybody does this. For example, CSS-Tricks' guide makes the distinction very well. I just find the layout of the info hard to work with.
Seriously -- you're asking?
For learners, check out the simple guide in the handouts folder. We can't take much credit for it; another expert developed most of the content. We added a few remarks and made it more "page" oriented". (Thanks, Joni!)