Flexbox with Fantasai

On 3rd June 2015 a small group of relatively experienced developers went to Mozilla London to go through the flexbox spec with co-editor Fantasai. The purpose was to nitpick the spec to make it as understandable as possible to a developer, rather than browser vendors. It was an incredible day and it was such an informal environment that I felt comfortable asking some quite stupid questions (and admitting to feeling slightly ill from an SVG haha), so thank you Fantasai for that!

These are the notes I wrote down as we went along, sorry they won't all make sense as it is slightly out of context.

Section 2

• In-flow children = flex items
• Out of flow item is floated or absolute position etc.
• Layout calculations biased to directions.

Section 3

• flex - block level
• inline-flow - inline level
• Floats do not intrude
• Flex container margins do not collapse
• Margin collapse means when margins intersect
• float has effect but can influence display properties computed value
• floated table-cell to block so no anonymous boxes

Section 4

• Anonymous flex item containing only white space is basically display: none
• Fixes issue with inline-block where it shows spaces
• Still supports nth-child
• Use order only for visual
• flex-items are flex level not block level
• blockification -> set outer container to block
• Used size - final size
• Static position of absolute is separate layer
• 4.2 dispute - I think logical is better
• visibility: collapse - collpased flex item
• flex-items would reflow but container stay same width/height
• Compute size of struct:
  • flex layout performed with all items uncollapsed
  • rerun with each collapsed item replaced by a struct maintaining original cross-size of items original line
• Visibility collapse for dynamic case
• Transfered size - min is largest content that cannot wrap

Section 5

• Order visibility only
• Big focus on accessibility
• Row direction = writing mode direction
• flex-wrap - nowrap - single line, wrap - multiline
• flex-flow - shorthand for flex-direction and flex-wrap
• flex-grow - default 1
• flex-basis - default 0%
• none - 0 0 auto
• Negative free space is the amount of overflow
• Basis is where you start for width
• It then flexes based on grow and shrink

Section 7

• flex initial - flex: 0 1 auto
• flex auto - flex: 1 1 auto
• flex none - flex: 0 0 auto
• flex <number> = flex: <number> 0%
• min-width: min-content