Aleph1-Layout Tester

a1-row / a1-column

those are the main layout classes, put them on an element to make it a flex container.

the flow of the items is dictated by the container orientation (row/column).

if no other class is applied: the container and direct children will have some default behavior:

• the container will not wrap (overflow behavior will be dictated by other classes)
• each direct child will take they `auto` size (unless specified differently by the child)
• there will be no spacing between items and the container
• there will be no spacing between items
• items will stretch in the cross axis (the axis opposite to the parent flow)

notice how a row will default to 100% width, but a column will not

a1-spaced-items + a1-divided-items

you can apply space between the children by using a1-spaced-items

you can additionally add the class a1-divided-items to have a visual divider between them.

(a1-divided-items uses the :after pseudo classes - use this class carefully if you plan to use the pseudo class yourself)

• the space between the items is defined by $margin
• default margin is 1rem
• the divider is always at the middle of the space
• the divider is defined by: `border: $divider-width $divider-style $divider-color`
• divider default: `border: 1px solid rgba(0, 0, 0, 0.1)`

a1-justify-items

use this class to equally divide the space between items.

for the purpose of this demonstration, the rows width and the columns height are set to a static size of 250px.

a1-same-size

use this class to make all items in the same size

for the purpose of this demonstration, the columns height is set to a static size of 250px.

a1-long

use this class to make an item span the remaining space of the container

for the purpose of this demonstration, the columns height is set to a static size of 250px.

a1-elastic

use this class to make an item shrink to reduce overflow of the container

for the purpose of this demonstration, the columns height is set to a static size of 250px.

a1-end / a1-reverse

you can move all the items to the end of the container by applying a1-end (while preserving the original order)

you can move all the items to the end of the container and reversing their order by applying a1-reverse

for the purpose of this demonstration, the columns height is set to a static size of 250px.

a1-end + a1-reverse

if you apply a1-end and a1-reverse you get the reverse order but at the start of the container

for the purpose of this demonstration, the columns height is set to a static size of 250px.

a1-center-items-h a1-center-items-v

apply those classes to center items vertically or horizontally (regardless of flow direction)

individual items can change their own behavior as shown later

for the purpose of this demonstration, the columns height is set to a static size of 250px.

a1-self-center a1-self-stretch

individual items can change their own behavior to be centered or stretched

for the purpose of this demonstration, the columns height is set to a static size of 250px.

overflow behaviors

you can control the overflow state of a container by applying one of the following classes.

• the default behavior is to have a scroll only if needed
• a1-overflow-visible: the content will be visible outside of the parent boundaries
• a1-no-scroll: the content will be hidden outside of the parent boundaries, and no scroll will be provided
• a1-magic-scroll: a scroll will be provided only when the user hovers above the container

for the purpose of this demonstration, the rows width and the columns height are set to a static size of 250px.

helper classes

a1-padding a1-padding-lr a1-padding-tb

all of the above uses $padding with default: 1rem

a1-margin a1-margin-lr a1-margin-tb

all of the above uses $margin with default: 1rem

a1-full-height: set item height to be 100%