Elegant.Flex

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.


FlexDirection


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.


FlexWrap


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


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.


Positionning


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


Flex


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 )