Wilmington University Design System

Flex

Class List

• .Flex = will display flex.
• .Flex-column = will display flex and arrange in column order.
• .Flex-wrap = will set flex-wrap=wrap to allow flex items to break to multiple lines.
• .MobileFlex-column = After the view port shrinks to 1023px the flex item will rearrange into a column order.
• .MobileFlex-wrap = After the view port shrinks to 1023px the flex item have flex-wrap attribute allowing items to break to a new row.
• .Flex-grow = sets flex child item to fill the remaining space in the flex container.
• .Gap10-.Gap100 = Gap will work similiar to Grid Gap and apply gutter/margin space between child items within a flex container. The gap classes are in increments of ten.
• .Flex-center = sets flex items inside parent to vertically and horizontally align center.
• .Flex-centerV = sets flex items inside parent to vertically align center. NOTE: when using Flex-column the values for vertical and horizontal flip, so this class will align items horizontally center when using Flex-column.
• .Flex-centerH = sets flex items inside parent to horizontally align center. NOTE: when using Flex-column the values for vertical and horizontal flip, so this class will align items vertically center when using Flex-column.
• .Flex-80, .Flex-100, .Flex-150, .Flex-200, .Flex-250, .Flex-300, .Flex-350, .Flex-400, .Flex-450 = applied to child items within a flex container. Will set their width to pixels based on the number. The widths stay locked at the pixels designated at all screen sizes.
• .Flex-500, .Flex-600, .Flex-700, .Flex-800, .Flex-900, .Flex-1000 = applied to child items within a flex container. Will set their width to pixels. The widths stay locked at the pixels designated until the screen size reaches the same pixels, and then it breaks to full width. For instance, Flex-500 will remain 500px until the viewport reaches 500px, then it will break to full width and be responsive for small screen sizes.

Flex Example

The example below uses Flex to center align tiles on a web page and allows them to break to a new line as the page shrinks.