Flexbox with Fantasai

Published on

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