elm-athlete / athlete / Elegant.Flex

Flex handles everything related to the flex element.


type alias FlexContainerDetails =
{ direction : Maybe FlexDirection
, wrap : Maybe FlexWrap
, align : Maybe Align
, justifyContent : Maybe 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 Basics.Int
, shrink : Maybe Basics.Int
, basis : Maybe (Either Elegant.Helpers.Shared.SizeUnit Elegant.Helpers.Shared.Auto)
, alignSelf : Maybe 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 : FlexDirection -> Modifiers.Modifier FlexContainerDetails

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

column : FlexDirection

Defines the flex direction column.

row : FlexDirection

Defines the flex direction row.

FlexWrap

wrap : Modifiers.Modifier FlexContainerDetails

Modifies the flex-wrap to wrap.

noWrap : Modifiers.Modifier FlexContainerDetails

Modifies the flex-wrap to no-wrap.

AlignItems / AlignSelf

align : Align -> Modifiers.Modifier FlexContainerDetails

Accepts an Align, and modifies the flex container accordingly.

alignXY : ( Align, JustifyContent ) -> FlexContainerDetails -> FlexContainerDetails

baseline : Align

Generates a baseline alignment.

alignCenter : Align

Generates a center alignment.

flexStart : Align

Generates a flex-start alignment.

flexEnd : Align

Generates a flex-end alignment.

inherit : Align

Generates a inherit alignment.

initial : Align

Generates a initial alignment.

stretch : Align

Generates a stretch alignment.

JustifyContent

justifyContent : JustifyContent -> Modifiers.Modifier FlexContainerDetails

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

spaceBetween : JustifyContent

Defines the justify-content space-between.

spaceAround : JustifyContent

Defines the justify-content space-around.

justifyContentCenter : JustifyContent

Defines the justify-content center.

justifyContentFlexStart : JustifyContent

Defines the justify-content flex-start.

justifyContentFlexEnd : JustifyContent

Defines the justify-content flex-end.

Positionning

topLeft : FlexContainerDetails -> FlexContainerDetails

topCenter : FlexContainerDetails -> FlexContainerDetails

topRight : FlexContainerDetails -> FlexContainerDetails

centerLeft : FlexContainerDetails -> FlexContainerDetails

center : FlexContainerDetails -> FlexContainerDetails

centerRight : FlexContainerDetails -> FlexContainerDetails

bottomLeft : FlexContainerDetails -> FlexContainerDetails

bottomCenter : FlexContainerDetails -> FlexContainerDetails

bottomRight : FlexContainerDetails -> FlexContainerDetails

Flex

grow : Basics.Int -> Modifiers.Modifier FlexItemDetails

Accepts an int and sets the flex-grow accordingly.

shrink : Basics.Int -> Modifiers.Modifier FlexItemDetails

Accepts an int and sets the flex-shrink accordingly.

basisAuto : Modifiers.Modifier FlexItemDetails

Sets the flex-basis as auto.

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

Accepts a size and sets the flex-basis accordingly.

alignSelf : Align -> Modifiers.Modifier FlexItemDetails

Accepts an align and modifies the flex item accordingly.

defaultFlexContainerDetails : FlexContainerDetails

defaultFlexItemDetails : FlexItemDetails

flexContainerDetailsToCouples : FlexContainerDetails -> List ( String, String )

flexItemDetailsToCouples : FlexItemDetails -> List ( String, String )