Components
Utilities
Fonts
Components
Utilities
Fonts
The Ledge
The Ledge is a flexbox that allows you to get the elements in a row display.
It automatically wraps when the content overflows.
The twin-width attribute gives the same width to all the child elements.
- justify: the justify-content value
- align: the align-items value
- gap: the space between the elements
- twin-width: give the same with to every elements
- nowrap: unable the natural wrapping of the ledge
Examples
The gap attribute allows you to space elements. If you don't set a gap value, the elements will be side by side. Try to modify the gap value in the example bellow.
Element 1
Element 2
Element 3
To manage the horizontal alignment of child elements, you just need give a value to the justify attribute. You can set any value allowed in CSS, like center, space-between etc...
To manage the vertical alignment, use the align attribute, which is a replacement for the align-items property.
Try to modify the justify and align value in the example bellow.
1
2
Oups...
Im an higher Element
The twin-width attribute will give the same width to all Ledge's children. It's very useful when you want different content width elements to be separated evenly.
Element 1
Element 2
Oups... my content is longer than the others.
When the attribute nowrap is defined on a ledge, it will never wrap.
Try it yourself on the next exemple
1
2
No matter how long my content is, this ledge will never wrap