Flexbox Layout Classes
Trongate CSS provides utility classes for flexbox layouts, making it easy to create responsive and dynamic layouts. These classes control flex container direction, alignment, spacing, and item behavior.
Basic Flex Containers
Use .flex-row or .flex-column to create flex containers with different directions:
Justify Content Classes
Control horizontal alignment using justify content classes:
Align Items Classes
Control vertical alignment using align items classes:
Flex Grow
Use .flex-grow to allow an item to fill available space:
Trongate CSS file gives buttons a top margin. The relevant rule is:
To mitigate this, a class of .mt-0 is added to the button, in the example.
Flex Wrap
Flex containers in Trongate CSS allow you to control whether flex items stay on one line or wrap onto additional lines. This behaviour is controlled using the .flex-wrap and .flex-nowrap classes.
The .flex-wrap class makes items wrap onto the next line when they exceed the container's width, ensuring a responsive layout. In contrast, the .flex-nowrap class forces all items to remain on a single line, even if they overflow the container.
Example: Wrapping Items
In this example, the .flex-wrap class is applied to a flex container. Items automatically wrap to a new line when there is not enough horizontal space in the container. Each button is styled with flex: 1 1 auto;, which allows them to grow and shrink proportionally, while also having consistent spacing through margins.
Example: Preventing Wrapping
The following example uses the .flex-nowrap class to keep all items on a single line. Notice how the container may overflow horizontally, which can be addressed with overflow-x: auto;. This is particularly useful for layouts where items need to remain in a single row.
When working with flex wrap utilities, remember to combine them with appropriate margins, padding, and overflow styles to achieve the desired layout and usability. Wrapping is ideal for responsive designs, while preventing wrapping suits controlled, fixed-width layouts.
Practical Example
Here's a common layout pattern combining multiple flex utilities:
Price: $99.99
In stock: 42 units
Conclusion
Flexbox utilities in Trongate CSS empower developers to build responsive and highly customisable layouts with ease. By combining these utilities with margin, padding, and size classes, you can achieve precise alignment and spacing. Always keep in mind that flexbox properties only affect immediate child elements, making it essential to structure your HTML hierarchy thoughtfully for optimal results. Whether creating adaptive, wrapping designs or enforcing strict alignment, flexbox is a versatile tool to meet your layout needs.