Combined with .flex, Architect support all of the Flexbox CSS properties like:

• flex-direction
• flex-wrap
• justify-content
• align-content
• align-items
• align-self
• flex-grow
• flex-shrink

Use:

• .flex-row: for the default horizontal direction(row)
• .flex-row-reverse: to initiate the horizontal direction from the opposite side
• .flex-column: for the vertical direction
• .flex-column-reverse: to initiate the vertical direction from the opposite side

Use:

• .flex-wrap: to allow flex items to wrap
• .flex-wrap-reverse: to wrap flex items in the reverse direction
• .flex-nowrap: don't allow flex items to wrap

Use:

• .justify-start:Aligns items to the start of the main axis.
• .justify-end:Aligns items to the end of the main axis.
• .justify-center: to centers items along the main axis.
• .justify-between: to distributes items evenly along the main axis.
• .justify-around: to distributes items evenly along the main axis with equal space around them.
• .justify-evenly: to distributes items evenly along the main axis with equal space around them.

Use:

• .items-start:Aligns items to the start of the cross axis.
• .items-end:Aligns items to the end of the cross axis.
• .items-center: Centers items along the cross axis.
• .items-stretch: Stretches items to fill the container along the cross axis.

Use:

• .align-self-start: Aligns the individual item to the start of the cross axis.
• .align-self-end: Aligns the individual item to the end of the cross axis.
• .align-self-center: Centers the individual item along the cross axis.
• .align-self-stretch: Stretches the individual item to fill the container along the cross axis.

Use:

• .item-{n}: To sets the order of the item to {n}th position.
• As the order property accepts integer values ranging from 1 to 12, include custom CSS for any additional values required.