Flexbox

@ExperimentalCoroutinesApi()
interface Flexbox : StyleParams, Alignment

This context interface offers functions to styleflexbox(https://developer.mozilla.org/en/docs/Learn/CSS/CSS_layout/Flexbox)-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

alignContent
Link copied to clipboard
js
open fun alignContent(value: AlignContentValues.() -> AlignContentProperty)
This function sets the align-content propertyExample call:
align-content { flexStart }
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.
alignItems
Link copied to clipboard
js
open fun alignItems(value: AlignItemsValues.() -> AlignItemsProperty)
This function sets the align-items propertyExample call:
align-items { flexStart }
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.
direction
Link copied to clipboard
js
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.
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
justifyContent
Link copied to clipboard
js
open fun justifyContent(value: JustifyContentValues.() -> JustifyContentProperty)
This function sets the justify-content propertyExample call:
justify-content { flexStart }
This function sets the justify-content property for each media device independently.
toString
Link copied to clipboard
js
open fun toString(): String
wrap
Link copied to clipboard
js
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

lgProperties
Link copied to clipboard
js
abstract val lgProperties: StringBuilder
collects the properties for large screens
mdProperties
Link copied to clipboard
js
abstract val mdProperties: StringBuilder
collects the properties for middle-sized screens
smProperties
Link copied to clipboard
js
abstract val smProperties: StringBuilder
collects the properties for small screens
xlProperties
Link copied to clipboard
js
abstract val xlProperties: StringBuilder
collects the properties for extra-large screens

Inheritors

FlexParams
Link copied to clipboard