Container Attributes
These attributes are available to
ftd.row and ftd.column container
components in ftd.wrap: optional boolean
This property is used to wrap flex elements. If the elements are not flex, this
will have no effect.
Sample code using
wrapInput
-- ftd.row:
width.fixed.px: 100
spacing.fixed.px: 10
border-color: $red-yellow
border-width.px: 2
color: $inherited.colors.text
wrap: true
-- ftd.text: One
-- ftd.text: Two
-- ftd.text: Three
-- ftd.text: Four
-- ftd.text: Five
-- ftd.text: Six
-- end: ftd.row
Lang:
ftd
Output
One
Two
Three
Four
Five
Six
align-content: optional ftd.align
This property defines how elements are aligned
inside a flex container like
ftd.row, ftd.column. It takes value of type
ftd.align and is optional.Sample code using
align-contentInput
-- ftd.column:
width.fixed.px: 300
align-content: top-center
color: $inherited.colors.text
border-color: $red-yellow
border-width.px: 2
-- ftd.text: One
-- ftd.text: Two
-- ftd.text: Three
-- end: ftd.column
Lang:
ftd
Output
One
Two
Three
spacing: optional ftd.spacing
This property defines the spacing between and around the container elements.
It takes value of type
ftd.spacing
and is optional.Sample code using
spacingInput
-- ftd.row:
spacing: space-evenly
border-color: $red-yellow
border-width.px: 2
color: $inherited.colors.text
width: fill-container
-- ftd.text: One
-- ftd.text: Two
-- ftd.text: Three
-- end: ftd.row
Lang:
ftd
Output
One
Two
Three
