TBD - WIP (draft)
Topic: Discussion about naming and implementing the missing flex mixins. This is a proposed version.

Common CSS rule mapping pattern

• flex-grow: 2 -> .flex-grow( 2 )
• display: flex -> .display( flex )

Mixins missin from the core

Mixin following the common pattern

• .display( flex ), .display( flex-inline )

Shorthand for efficiency

• .display-flex(), .display-flex( inline )

Basic flex properties

• .flex-size( @grow: 0, @shrink: 1, @base-size: auto, @direction: row ) (.flex() is taken)
• .flex-grow( @grow )
• .flex-shrink( @shrink ) (not necessary so far)
• .flex-order( @order ) (.flex-* prefix for namespacing and consistency)

Implement align and justify mixins

• .align-items( @value: normal )
• .align-content( @value: normal )
• .justify-content( @value: normal )
• Flex layout ignores justify-items, not necessary until we start using grid layout.

Separate file: mediawiki.mixins.flex-align.less
Mapping to 2009 flexbox property values makes it complex and longer.

Deprecate old mixins that don't follow the common pattern

• .flex( @grow: 1, @shrink: 1, @width: auto, @order: 1 )
  • @grow's default is different from the initial 0 value in the specification
  • @order's default is different from the initial 0 value
  • @order is an orthogonal concern to the flow rule.
• .flex-display( @display: flex )
  • Too long, inconsistent with the CSS rule mapping: