CA-flexbox
Flexbox is a tool in CSS that helps organize and arrange items inside a container. It
makes it easy to
adjust the
size, spacing, and alignment of items so they look good on different screen sizes. It's especially useful for
designing web pages that work well on both big and small screens.
Live demo
Coming soon.
Anatomy
Flex container is the parent element that has display: flex or display: inline-flex applied to
it, defining the layout rules.Flex items are the direct children of the flex container that are arranged within the
container.
Main-axis is the primary direction in which flex items are arranged, determined by the
flex-direction property.Cross-axis is perpendicular to the main axis, used for alignment and spacing.Flex properties are a set of CSS properties used to control the layout of flex items within the
flex container,
including flex-direction, justify-content, align-items, flex-wrap, etc.
Developer notes
| Tags, attributes, classes |
Description |
ca-flex |
Custom building block for our flex-box containers. |
ca-self |
Custom building block you can use to apply CSS flexbox properties without
needing additional utility classes, though, we
have utility classes in case they are needed. |
display: flex; |
Sets the container to display as a flexbox. |
display: inline-flex; |
Sets the container to display as an inline-flexbox. |
direction="" |
|
grow="" |
|
shrink="" |
|
basis="" |
|
name="" |
|
.visually-hidden |
|
Accessibility
| Element or property |
Description |
footer |
|
ca-grid |
|
ca-footer-links |
|
ca-social-links |
|
ca-footer-end |
|
ca-current-year |
|
ca-utility-icon |
|
ca-pic |
|
name="" |
|
.visually-hidden |
|
Changelog
| Date |
Version |
Affects |
Notes |
| MM/DD/YYYY |
0.0.0.0 |
Something |
This is the first release. |