Flexbox
This context interface offers functions to styleflexbox-layouts.
It does not create a flexbox layout though!
This is done by a special `dev.fritz2.components.flexBox` fabric function that creates a component with the display property already set to `flex`.
So it is recommended to use the provided functions within the styles parameter of `dev.fritz2.components.flexBox`.
This interface offers all the inherited functions of Alignment that corresponds to the CSS alignment module.
On top it offers the direction function in order to set the direction of the layout flow. There is an overloaded variant that enables one to define the flow for each media device independently.
There is also the wrap function that sets the wrapping behaviour of a flexbox layout. There exist an overloaded variant for this function too, that enables to define the behaviour for all media devices independently.
You can define a layout like this for example:
flex ({ /* it == FlexStyleParams (sum type of different StyleParams based interfaces including this one) */
direction { row }
wrap { nowrap }
// inherited from [Alignment]
justifyContent { center }
}) {
// child content of the flex container
}See also
Functions
This function sets the align-content property
This function sets the align-content property for each media device independently.
This function sets the align-items property
This function sets the align-items property for each media device independently.
This function sets the flex-direction property for all media devices.
This function sets the flex-direction property for each media device independently.
This function sets the justify-content property
This function sets the justify-content property for each media device independently.
This function sets the flex-wrap property for all media devices.
This function sets the flex-wrap property for each media device independently.