Styles Flex Classes
Description
The BcFlex utility provides CSS classes for controlling flexbox-based layouts. These classes allow elements to be arranged in rows or columns and control alignment, spacing, and justification. Responsive versions of these classes can be used to adjust layouts based on breakpoints.
Responsive Flex Classes
For responsive control, use classes like 'bc-flex-sm-column' or 'bc-justify-content-lg-center' to adjust flex behavior at different breakpoints.
Available Flex Classes
bc-flex-grow
Applies 'flex-grow: 1', making the element expand to fill available space.
bc-flex-row
Applies 'flex-direction: row', arranging items in a horizontal row.
bc-flex-column
Applies 'flex-direction: column', arranging items in a vertical column.
bc-flex-row-reverse
Applies 'flex-direction: row-reverse', reversing the row order.
bc-flex-column-reverse
Applies 'flex-direction: column-reverse', reversing the column order.
bc-justify-content-center
Applies 'justify-content: center', centering items along the main axis.
bc-justify-content-around
Applies 'justify-content: space-around', distributing items evenly with space around them.
bc-justify-content-between
Applies 'justify-content: space-between', distributing items with equal space between them.
bc-justify-content-start
Applies 'justify-content: flex-start', aligning items to the start of the main axis.
bc-justify-content-end
Applies 'justify-content: flex-end', aligning items to the end of the main axis.
bc-align-items-center
Applies 'align-items: center', centering items along the cross axis.
bc-align-items-start
Applies 'align-items: flex-start', aligning items to the start of the cross axis.
bc-align-items-end
Applies 'align-items: flex-end', aligning items to the end of the cross axis.
bc-align-items-baseline
Applies 'align-items: baseline', aligning items along their text baseline.
bc-flex-wrap
Applies 'flex-wrap: wrap', allowing flex items to wrap onto multiple lines.
bc-flex-no-wrap
Applies 'flex-wrap: nowrap', preventing flex items from wrapping onto new lines.
bc-flex-wrap-reverse
Applies 'flex-wrap: wrap-reverse', wrapping flex items in reverse order.