California Design System

Flex

This is an attempt to create a "utility tag" to supplement our utility classes.

Standard

This is the default <ca-flex> in action

1
2
3
4
5

It works with classes too.

1
2
3
4
5

Direction

Control the flex-direction with the direction attribute.

1
2
3
4
5

Reversals work too.

1
2
3
4
5

Wrap

Use the wrap attributes to control wrapping.

1
2
3
4
5

Gaps

Use the gap attribute to control the gap.

1
2
3
4
5

The gap-x attribute limits the gap to columns.

1
2
3
4
5

The gap-y attribute limits the gap to rows.

1
2
3
4
5

Align

Use the align-items attribute to control the alignment.

1
2
3
4
5

align-content works too.

1
2
3
4
5

Use the align attribute on <ca-self> to align a single item.

1
2
3
4
5

Justify

justify-content controls justification.

1
2
3
4
5

Basis

Use the basis attribute on <ca-self> to control flex-basis.

This remains limited in functionality. To do flex-basis well, we need some "standard block sizes" for content components.

1
2
3
4
5

Grow and shrink

Use grow and shrink attributes on <ca-self> to control their respective flex properties.

Some research would be helpful to understand which grow and shrink values are, well, valuable.

1
2
3
4
5