components
Utilities
Ledge-l
The Ledge is a flexbox that allows you to get the elements in a row display.
It automatically wraps when the content overflows.
You can use the twin-width attribute to give the same width to all the child elements.
- justify : the justify-content value.
- align : the align-items value.
- gap : the space between the child elements.
- twin-width : give the same with to every elements.
- nowrap : disable 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.
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.
Element 1
Element 2
Element 3
I am a bigger 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.
Element 1
Element 2
No matter how long my content is, this ledge will never wrap