Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
block : Html.Attribute msg
Make an element become a flex container (whilst being a block level element).
blockSm : Html.Attribute msg
Make an element become a flex container (whilst being a block level element) from SM breakpoint and up.
blockMd : Html.Attribute msg
Make an element become a flex container (whilst being a block level element) from MD breakpoint and up.
blockLg : Html.Attribute msg
Make an element become a flex container (whilst being a block level element) from LG breakpoint and up.
blockXl : Html.Attribute msg
Make an element become a flex container (whilst being a block level element) from XL breakpoint and up.
inline : Html.Attribute msg
Make and element become a flex container (whilst being an inline element).
inlineSm : Html.Attribute msg
Make and element become a flex container (whilst being an inline element) from SM breakpoint and up.
inlineMd : Html.Attribute msg
Make and element become a flex container (whilst being an inline element) from MD breakpoint and up.
inlineLg : Html.Attribute msg
Make and element become a flex container (whilst being an inline element) from LG breakpoint and up.
inlineXl : Html.Attribute msg
Make and element become a flex container (whilst being an inline element) from XL breakpoint and up.
row : Html.Attribute msg
Set flex direction to row.
rowSm : Html.Attribute msg
Set flex direction to row from SM breakpoint and up.
rowMd : Html.Attribute msg
Set flex direction to row from MD breakpoint and up.
rowLg : Html.Attribute msg
Set flex direction to row from LG breakpoint and up.
rowXl : Html.Attribute msg
Set flex direction to row from XL breakpoint and up.
rowReverse : Html.Attribute msg
Set flex direction to row-reverse (starting from the oposite side).
rowReverseSm : Html.Attribute msg
Set flex direction to row-reverse (starting from the oposite side) from SM breakpoint and up.
rowReverseMd : Html.Attribute msg
Set flex direction to row-reverse (starting from the oposite side) from MD breakpoint and up.
rowReverseLg : Html.Attribute msg
Set flex direction to row-reverse (starting from the oposite side) from LG breakpoint and up.
rowReverseXl : Html.Attribute msg
Set flex direction to row-reverse (starting from the oposite side) from XL breakpoint and up.
col : Html.Attribute msg
Set flex direction to flex-column.
colSm : Html.Attribute msg
Set flex direction to flex-column from SM breakpoint and up.
colMd : Html.Attribute msg
Set flex direction to flex-column from MD breakpoint and up.
colLg : Html.Attribute msg
Set flex direction to flex-column from LG breakpoint and up.
colXl : Html.Attribute msg
Set flex direction to flex-column from XL breakpoint and up.
colReverse : Html.Attribute msg
Set flex direction to flex-column-reverse.
colReverseSm : Html.Attribute msg
Set flex direction to flex-column-reverse from SM breakpoint and up.
colReverseMd : Html.Attribute msg
Set flex direction to flex-column-reverse from MD breakpoint and up.
colReverseLg : Html.Attribute msg
Set flex direction to flex-column-reverse from LG breakpoint and up.
colReverseXl : Html.Attribute msg
Set flex direction to flex-column-reverse from XL breakpoint and up.
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start y-axis if flex-direction: column). Choose from start (browser default)/ end / center / between / or around.
justifyStart : Html.Attribute msg
Set main axis alignment for items in flexbox container to start.
justifyStartSm : Html.Attribute msg
Set main axis alignment for items in flexbox container to start. Applicable from breakpoint SM and up.
justifyStartMd : Html.Attribute msg
Set main axis alignment for items in flexbox container to start. Applicable from breakpoint MD and up.
justifyStartLg : Html.Attribute msg
Set main axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.
justifyStartXl : Html.Attribute msg
Set main axis alignment for items in flexbox container to start. Applicable from breakpoint XL and up.
justifyEnd : Html.Attribute msg
Set main axis alignment for items in flexbox container to end
justifyEndSm : Html.Attribute msg
Set main axis alignment for items in flexbox container to end. Applicable from breakpoint SM and up.
justifyEndMd : Html.Attribute msg
Set main axis alignment for items in flexbox container to end. Applicable from breakpoint MD and up.
justifyEndLg : Html.Attribute msg
Set main axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.
justifyEndXl : Html.Attribute msg
Set main axis alignment for items in flexbox container to end. Applicable from breakpoint XL and up.
justifyCenter : Html.Attribute msg
Set main axis alignment for items in flexbox container to center.
justifyCenterSm : Html.Attribute msg
Set main axis alignment for items in flexbox container to center. Applicable from breakpoint SM and up.
justifyCenterMd : Html.Attribute msg
Set main axis alignment for items in flexbox container to center. Applicable from breakpoint MD and up.
justifyCenterLg : Html.Attribute msg
Set main axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.
justifyCenterXl : Html.Attribute msg
Set main axis alignment for items in flexbox container to center. Applicable from breakpoint XL and up.
justifyBetween : Html.Attribute msg
Set main axis alignment for items in flexbox container to between.
justifyBetweenSm : Html.Attribute msg
Set main axis alignment for items in flexbox container to between. Applicable from breakpoint SM and up.
justifyBetweenMd : Html.Attribute msg
Set main axis alignment for items in flexbox container to between. Applicable from breakpoint MD and up.
justifyBetweenLg : Html.Attribute msg
Set main axis alignment for items in flexbox container to between. Applicable from breakpoint LG and up.
justifyBetweenXl : Html.Attribute msg
Set main axis alignment for items in flexbox container to between. Applicable from breakpoint XL and up.
justifyAround : Html.Attribute msg
Set main axis alignment for items in flexbox container to around.
justifyAroundSm : Html.Attribute msg
Set main axis alignment for items in flexbox container to around. Applicable from breakpoint SM and up.
justifyAroundMd : Html.Attribute msg
Set main axis alignment for items in flexbox container to around. Applicable from breakpoint MD and up.
justifyAroundLg : Html.Attribute msg
Set main axis alignment for items in flexbox container to around. Applicable from breakpoint LG and up.
justifyAroundXl : Html.Attribute msg
Set main axis alignment for items in flexbox container to around. Applicable from breakpoint XL and up.
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start or x-axis if flex-direction: column). Choose from start / end / center / baseline / or stretch (browser default).
alignItemsStart : Html.Attribute msg
Set cross axis alignment for items in flexbox container to start.
alignItemsStartSm : Html.Attribute msg
Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint SM and up.
alignItemsStartMd : Html.Attribute msg
Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint MD and up.
alignItemsStartLg : Html.Attribute msg
Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.
alignItemsStartXl : Html.Attribute msg
Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.
alignItemsEnd : Html.Attribute msg
Set cross axis alignment for items in flexbox container to end.
alignItemsEndSm : Html.Attribute msg
Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint SM and up.
alignItemsEndMd : Html.Attribute msg
Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint MD and up.
alignItemsEndLg : Html.Attribute msg
Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.
alignItemsEndXl : Html.Attribute msg
Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.
alignItemsCenter : Html.Attribute msg
Set cross axis alignment for items in flexbox container to center.
alignItemsCenterSm : Html.Attribute msg
Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint SM and up.
alignItemsCenterMd : Html.Attribute msg
Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint MD and up.
alignItemsCenterLg : Html.Attribute msg
Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.
alignItemsCenterXl : Html.Attribute msg
Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.
alignItemsBaseline : Html.Attribute msg
Set cross axis alignment for items in flexbox container to baseline.
alignItemsBaselineSm : Html.Attribute msg
Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint SM and up.
alignItemsBaselineMd : Html.Attribute msg
Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint MD and up.
alignItemsBaselineLg : Html.Attribute msg
Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint LG and up.
alignItemsBaselineXl : Html.Attribute msg
Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint LG and up.
alignItemsStretch : Html.Attribute msg
Set cross axis alignment for items in flexbox container to stretched.
alignItemsStretchSm : Html.Attribute msg
Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint SM and up.
alignItemsStretchMd : Html.Attribute msg
Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint MD and up.
alignItemsStretchLg : Html.Attribute msg
Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint LG and up.
alignItemsStretchXl : Html.Attribute msg
Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint LG and up.
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with nowrap / wrap or reverse wrapping.
wrap : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines.
wrapSm : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint SM and up.
wrapMd : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint MD and up.
wrapLg : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint LG and up.
wrapXl : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint XL and up.
wrapReverse : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines in reverse order.
wrapReverseSm : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint SM and up.
wrapReverseMd : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint MD and up.
wrapReverseLg : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint LG and up.
wrapReverseXl : Html.Attribute msg
Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint XL and up.
nowrap : Html.Attribute msg
Don't allow flex items in a flex container to break into multiple lines.
nowrapSm : Html.Attribute msg
Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint SM and up.
nowrapMd : Html.Attribute msg
Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint MD and up.
nowrapLg : Html.Attribute msg
Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint LG and up.
nowrapXl : Html.Attribute msg
Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint XL and up.
Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start or x-axis if flex-direction: column). Choose from the same options as align-items: start / end / center / baseline / or stretch (browser default).
alignSelfStart : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to start.
alignSelfStartSm : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint SM and up.
alignSelfStartMd : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint MD and up.
alignSelfStartLg : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint LG and up.
alignSelfStartXl : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint LG and up.
alignSelfEnd : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to end.
alignSelfEndSm : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint SM and up.
alignSelfEndMd : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint MD and up.
alignSelfEndLg : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint LG and up.
alignSelfEndXl : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint LG and up.
alignSelfCenter : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to center.
alignSelfCenterSm : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint SM and up.
alignSelfCenterMd : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint MD and up.
alignSelfCenterLg : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint LG and up.
alignSelfCenterXl : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint LG and up.
alignSelfBaseline : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to baseline.
alignSelfBaselineSm : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint SM and up.
alignSelfBaselineMd : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint MD and up.
alignSelfBaselineLg : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint LG and up.
alignSelfBaselineXl : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint LG and up.
alignSelfStretch : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to stretch.
alignSelfStretchSm : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint SM and up.
alignSelfStretchMd : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint MD and up.
alignSelfStretchLg : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint LG and up.
alignSelfStretchXl : Html.Attribute msg
Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint LG and up.