Flexbox workshop
Fantasai held a CSS flexbox workshop at the Mozilla office in London last July 2015. The plan was to read aloud the Flexbox spec and discuss whatever wasn't clear or needed more explanations.
These notes have been stagnating in my laptop since then, but last week someone mentioned they had just heard that when the height of an element was set as a percentage, the base value was the parent's width and not their parent height, and they were totally mystified by this. Which reminded me that fantasai explained this during the workshop, and finally prompted me to publish this, in the hope that maybe it either helps someone, or confuses them to no end. You're welcome :-P
http://dev.w3.org/csswg/css-display/ introduction and then glossary
display property actually defines two things outer display type (how this element interacts with the rest of the page) inner display type (how my contents are layout)
flow layout - the old style layout with mixed blocks and floats and… it didn’t have a name until like may 2015
blocks make boxes and that means each box is its own formatting context so things from outside don’t affect the elements in the box
READ http://dev.w3.org/csswg/css-flexbox-1/#intro http://dev.w3.org/csswg/css-flexbox-1/#overview
2 http://dev.w3.org/csswg/css-flexbox-1/#box-model out of flow things like float or something that is out of the normal flow in flow the opposite? things haven’t been absolutely positioned
the float property stops boxes from auto generating certain things such as when you just have a cell it generates a table row - it will just be computed as a ‘block’ http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo “It’s super weird but basically no author should ever do or know that” aka “the float property makes the display property be computed differently”
selectors apply to the element tree, not the box tree (==the tree we use for rendering)
percentage margins/paddings in elemnets contained in block containers use the block width dimension for calculating the %, but in flex they use the actual width or height to calculate the % horizontally or vertically respectively this is because in normal block flow the height is generally auto so it would resolve to 0 and the % would also be 0 in flex layout: you get the percentages but they will be 0 unless you set the height of the container
sometiems you want a flex item to shrink but it won’t… and that’s because you might be stumbling upon some of the weird behaviours wrt min size in http://dev.w3.org/csswg/css-flexbox-1/#min-size-auto
using shorthands more things are reset, you often want to use shorthands e.g. use background: purple to get a full reset because you actually want to get rid of any other possible background effects
negative free space = the space that goes into overflow