Flex handles everything related to the flex element.

type alias FlexContainerDetails =

{ direction : Maybe.Maybe Elegant.Flex.FlexDirection, wrap : Maybe.Maybe Elegant.Flex.FlexWrap, align : Maybe.Maybe Elegant.Flex.Align, justifyContent : Maybe.Maybe Elegant.Flex.JustifyContent }

Contains all style which can be applied on a flex container. This contains flex-direction, flex-wrap, align-items and justify-content.

type alias FlexItemDetails =

{ grow : Maybe.Maybe Basics.Int, shrink : Maybe.Maybe Basics.Int, basis : Maybe.Maybe (Either.Either Elegant.Helpers.Shared.SizeUnit Elegant.Helpers.Shared.Auto), alignSelf : Maybe.Maybe Elegant.Flex.Align }

Contains all style which can be used on a flex item. This contains flex-grow, flex-shrink, flex-basis and align-self.

type FlexDirection


Represents a flex direction. Can be column or row.

type FlexWrap


Represents a flex wrap. Can be wrap or no-wrap.

type Align


Represents the alignment in flex. Can be baseline, center, flex-start, flex-end, inherit, initial or stretch.

type JustifyContent


Represents the value of justify-content. Can be space-between, space-around or center.


direction : Elegant.Flex.FlexDirection -> Modifiers.Modifier Elegant.Flex.FlexContainerDetails

Accepts a flex-direction and modifies the flex container accordingly.

column : Elegant.Flex.FlexDirection

Defines the flex direction column.

row : Elegant.Flex.FlexDirection

Defines the flex direction row.


wrap : Modifiers.Modifier Elegant.Flex.FlexContainerDetails

Modifies the flex-wrap to wrap.

noWrap : Modifiers.Modifier Elegant.Flex.FlexContainerDetails

Modifies the flex-wrap to no-wrap.

AlignItems / AlignSelf

align : Elegant.Flex.Align -> Modifiers.Modifier Elegant.Flex.FlexContainerDetails

Accepts an Align, and modifies the flex container accordingly.

alignXY : ( Elegant.Flex.Align, Elegant.Flex.JustifyContent ) -> Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

baseline : Elegant.Flex.Align

Generates a baseline alignment.

alignCenter : Elegant.Flex.Align

Generates a center alignment.

flexStart : Elegant.Flex.Align

Generates a flex-start alignment.

flexEnd : Elegant.Flex.Align

Generates a flex-end alignment.

inherit : Elegant.Flex.Align

Generates a inherit alignment.

initial : Elegant.Flex.Align

Generates a initial alignment.

stretch : Elegant.Flex.Align

Generates a stretch alignment.


justifyContent : Elegant.Flex.JustifyContent -> Modifiers.Modifier Elegant.Flex.FlexContainerDetails

Accepts a justify-content and modifies the flex container accordingly.

spaceBetween : Elegant.Flex.JustifyContent

Defines the justify-content space-between.

spaceAround : Elegant.Flex.JustifyContent

Defines the justify-content space-around.

justifyContentCenter : Elegant.Flex.JustifyContent

Defines the justify-content center.

justifyContentFlexStart : Elegant.Flex.JustifyContent

Defines the justify-content flex-start.

justifyContentFlexEnd : Elegant.Flex.JustifyContent

Defines the justify-content flex-end.


topLeft : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

topCenter : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

topRight : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

centerLeft : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

center : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

centerRight : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

bottomLeft : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

bottomCenter : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails

bottomRight : Elegant.Flex.FlexContainerDetails -> Elegant.Flex.FlexContainerDetails


grow : Basics.Int -> Modifiers.Modifier Elegant.Flex.FlexItemDetails

Accepts an int and sets the flex-grow accordingly.

shrink : Basics.Int -> Modifiers.Modifier Elegant.Flex.FlexItemDetails

Accepts an int and sets the flex-shrink accordingly.

basisAuto : Modifiers.Modifier Elegant.Flex.FlexItemDetails

Sets the flex-basis as auto.

basis : Elegant.Helpers.Shared.SizeUnit -> Modifiers.Modifier Elegant.Flex.FlexItemDetails

Accepts a size and sets the flex-basis accordingly.

alignSelf : Elegant.Flex.Align -> Modifiers.Modifier Elegant.Flex.FlexItemDetails

Accepts an align and modifies the flex item accordingly.

defaultFlexContainerDetails : Elegant.Flex.FlexContainerDetails

defaultFlexItemDetails : Elegant.Flex.FlexItemDetails

flexContainerDetailsToCouples : Elegant.Flex.FlexContainerDetails -> List.List ( String.String, String.String )

flexItemDetailsToCouples : Elegant.Flex.FlexItemDetails -> List.List ( String.String, String.String )