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: