flexBox

fun RenderContext.flexBox(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "flex-box", scope: ScopeContext.() -> Unit = {}, content: Div.() -> Unit): Div
Content copied to clipboard

This component represents a layout component with flex property. That is the `display` property is set to `flex`. Besides that is totally resembles the div component

Example usage:

flexBox({
     /* you can use flex styling properties for the _parent_ */
    justifyContent { center }
    alignItems { stretch }
    /* further styles */
         border {
             color { dark }
             size { normal }
             style { solid }
         }
    }) {
         p { +"Some content in the box" }
    }

See also

dev.fritz2.styling.params.Flexbox

for a detailed overview about how to define flexBox layouts

Parameters

styling

a lambda expression for declaring the styling as fritz2's styling DSL

baseClass

optional CSS class that should be applied to the element

id

the ID of the element

prefix

the prefix for the generated CSS class resulting in the form `$prefix-$hash`

content

a lambda expression for setting up the content and events of the `div` element itself