Flexbox

@ExperimentalCoroutinesApi
interface Flexbox : StyleParams, Alignment

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

Link copied to clipboard
open fun alignContent(value: AlignContentValues.() -> AlignContentProperty)

This function sets the align-content property

open fun alignContent(    sm: AlignContentValues.() -> AlignContentProperty? = null,     md: AlignContentValues.() -> AlignContentProperty? = null,     lg: AlignContentValues.() -> AlignContentProperty? = null,     xl: AlignContentValues.() -> AlignContentProperty? = null)

This function sets the align-content property for each media device independently.

Link copied to clipboard
open fun alignItems(value: AlignItemsValues.() -> AlignItemsProperty)

This function sets the align-items property

open fun alignItems(    sm: AlignItemsValues.() -> AlignItemsProperty? = null,     md: AlignItemsValues.() -> AlignItemsProperty? = null,     lg: AlignItemsValues.() -> AlignItemsProperty? = null,     xl: AlignItemsValues.() -> AlignItemsProperty? = null)

This function sets the align-items property for each media device independently.

Link copied to clipboard
open fun direction(value: DirectionValues.() -> DirectionProperty)

This function sets the flex-direction property for all media devices.

open fun direction(    sm: DirectionValues.() -> DirectionProperty? = null,     md: DirectionValues.() -> DirectionProperty? = null,     lg: DirectionValues.() -> DirectionProperty? = null,     xl: DirectionValues.() -> DirectionProperty? = null)

This function sets the flex-direction property for each media device independently.

Link copied to clipboard
open fun justifyContent(value: JustifyContentValues.() -> JustifyContentProperty)

This function sets the justify-content property

open fun justifyContent(    sm: JustifyContentValues.() -> JustifyContentProperty? = null,     md: JustifyContentValues.() -> JustifyContentProperty? = null,     lg: JustifyContentValues.() -> JustifyContentProperty? = null,     xl: JustifyContentValues.() -> JustifyContentProperty? = null)

This function sets the justify-content property for each media device independently.

Link copied to clipboard
open fun wrap(value: WrapValues.() -> WrapProperty)

This function sets the flex-wrap property for all media devices.

open fun wrap(    sm: WrapValues.() -> WrapProperty? = null,     md: WrapValues.() -> WrapProperty? = null,     lg: WrapValues.() -> WrapProperty? = null,     xl: WrapValues.() -> WrapProperty? = null)

This function sets the flex-wrap property for each media device independently.

Properties

Link copied to clipboard
abstract val lgProperties: StringBuilder

collects the properties for large screens

Link copied to clipboard
abstract val mdProperties: StringBuilder

collects the properties for middle-sized screens

Link copied to clipboard
abstract val smProperties: StringBuilder

collects the properties for small screens

Link copied to clipboard
abstract val xlProperties: StringBuilder

collects the properties for extra-large screens

Inheritors

Link copied to clipboard