Flex handles everything related to the flex element.
{ 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.
{ 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.
Represents a flex direction. Can be column or row.
Represents a flex wrap. Can be wrap or no-wrap.
Represents the alignment in flex. Can be baseline, center, flex-start, flex-end, inherit, initial or stretch.
Represents the value of justify-content. Can be space-between, space-around or center.
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.
wrap : Modifiers.Modifier FlexContainerDetails
Modifies the flex-wrap to wrap.
noWrap : Modifiers.Modifier FlexContainerDetails
Modifies the flex-wrap to no-wrap.
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 -> 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.
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
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 )