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 `wrap`
Input
-- 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`](ftd/built-in-types/#ftd-align) and is optional.
Sample code using `align-content`
Input
-- 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`](ftd/built-in-types/#ftd-spacing)
and is optional.
Sample code using `spacing`
Input
-- 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
Support `fastn`!
Enjoying `fastn`? Please consider giving us a star ⭐️ on
[GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)
Getting Help
Have a question or need help?
Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a)
to get answers and subscribe to it to stay tuned.
Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your
thoughts, suggestion, question etc.
Connect with our [community](/community/)!
[💻️](/community/)
Found an issue?
If you find some issue, please visit our [GitHub
issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.
Quick links:
- [Install `fastn`](install/)
- [Create `fastn` package](create-fastn-package/)
- [Expander Crash Course](expander/)
- [Syntax Highlighting in Sublime Text](/sublime/)
Join us
We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community
today.
We are trying to create the language for human beings and we do not believe it
would be possible without your support. We would love to hear from you.
Copyright © 2023 - [FifthTry.com](https://www.fifthtry.com/)
