Wilmington University Design System

Flex

Flex is an efficient way to layout, distribute, and space items within a parent container. By using Flex, you give the parent container the ability to alter the items within it to best fill the space. Flex works well within Grid layouts. Grid is meant to be used for large scale layout while Flex can work within it for small scale layouts.

.Flex Class

Our .Flex class will change the display property value of the container to flex. It is directional-agnostic as opposed to block layouts that are vertically-based.

Block Layout

Flex Layout

Flex Spacing and Gap

Flex will fill or shrink a space to fit content. You will notice in the example above that the two child paragraphs in the flex container are butted together without any padding or spacing. This is how our .Flex class is by default. You can add gutter at the parent level using Gap, and you can add Padding to child elements for more individual control. Flex will calculate this spacing automatically to fill the space and prevent overflow. You can find Gap classes and Padding classes for your use in the spacing and alignment section of the design system.

The below example uses .Gap10 class on the parent container to provide a 10px gutter, and each child has the .Padding10 class to give them both 10px of padding.

Flex direction and Wrap

As stated, Flex is directional-agnostic. You have total control on how you want child items to behave. In some situations you may want to keep the items in a single row. Other times, you may want them to break to a new row once content fills a container, or you may want to change the direction to column based instead of row based.

Lets look at an example where one container has more content in it. This is how it would look in a standard flex container without any wrap or directional changes. Both child items remain on the same row, no matter how small the screen size shrinks.

The situation above may be desired in certain circumstances. However, we can add a class that will have Flex automatically adjust and break content for us. The below example uses the .Flex-wrap class,  which will break the content to a new row when the screen size shrinks and the content hits the edge of the container. Try adjusting your screen size to see the behavior.

In certain situations you may desire a different directional layout. This can be accomplished using the .Flex-column class like below. The direction of the layout shifts so content is stacked (column) in the container instead of side by side (row).

Mobile Flex Wrap and Column

We have created two additional classes to give more control over the layout. .MobileFlex-column and .MobileFlex-wrap will apply flex-column and flex-wrap to a container, but it won't activate until the viewport shrinks below 1024px. This prevents content from breaking until a mobile view. We have found this to be an effective use for many situations across the website where you don't want content to make that break until smaller screens. You may think these do the same thing, however they function differently. .MobileFlex-wrap will still keep content on the same row until that content hits the edge of the container. You may want content in the same row on a larger screen but break after the content shrinks further, whereas applying flex-column will cause it to break in a column layout immediately. If you shrink your browser window you will see this behavior in action.

.MobileFlex-wrap

.MobileFlex-column

Aligning Items With Flex

IMPORTANT: All alignment classes are based on the standard Flex class. When you use the .Flex-column class the alignment classes flip! Ex. center vertically (.Flex-centerV) will now center horizontally and vice versa. This is due to the change in flow direction of items within the container.

Flex makes it very simple to align items within a parent container. By default, child items will align to the left and top of the container.

Center Items

We have three classes for centering items within a container: .Flex-center, .Flex-centerV, .Flex-centerH.

.Flex-center will align all elements within a container vertically and horizontally center. In the example below we gave the parent container a height of 80px to demonstate how the child items will vertically and horizontally align at center.

.Flex-centerV will align all elements within a container vertically center. In the example below we gave the parent container a height of 80px to demonstate how the child items will vertically align at center but remain left aligned.

.Flex-centerH will align all elements within a container horizontally center. In the example below we gave the parent container a height of 80px to demonstate how the child items will vertically align at the top but horizontally align at the center.

Other Alignment Classes

Flex gives you total control over alignment of child items. In the last example we horizontally centered items using .Flex-centerH. However, you may have noticed the items stretched vertically to fill the container. Stretching to fill the space is a default value. We can override that using the .Flex-start class. This will align the child items to the top.

Alternatively, we can align the items to the bottom using .Flex-bottom

Items can align to the right using the .Flex-right class.

Another powerful class is .Flex-space which will create space between child items within a container. When there are two, it sends them to the end of the container.

With three child items .Flex-space will distribute even space between them all.

Individual Child Alignment Classes

On the main axis Flex treats child items as a group. So you are unable to align individual children along the main axis of the flex direction. However, you can control individual child alignment in the cross axis (perpendicular to the flex direction). With the standard Flex class, the main axis is horizontal (left, center, right), which you can only control as a group. The cross axis (top, center, bottom) can be controlled at the child level. When using .Flex-column this control flips, but you will still use the same classes below.

The Item-centerV class will align a child item to the center.

The .Item-top and .Item-bottom class will align a child item to the top or bottom.

See the Pen Flex Child Alignment by Wilmington University (@WilmU01) on CodePen.

Sizing Items With Flex

Child items within Flex containers can be sized using the flex-basis property. We have prebuilt classes to define sizes for child items that should cover majority of instances across the website.

The following classes can be applied directly to a child and set the width in pixels by the corresponding class (i.e. .Flex-200 would be 200px wide). The child item will hold that width regardless of screen size.

• .Flex-80
• .Flex-100
• .Flex-150
• .Flex-200
• .Flex-250
• .Flex-300
• .Flex-350
• .Flex-400
• .Flex-450

When applying one of these classes to children with other child items in the container, it is best to use the .Flex-wrap class on the parent. Otherwise you risk breaking the layout as screen size shrinks due to the child item holding the pixel width.

The following classes can be applied directly to a child and set the width in pixels to the corresponding class (i.e. .Flex-500 would be 500px wide). The child item will hold that width until the viewport reaches the same size, and then the child will break to a width of 100% for proper mobile responsiveness.

• .Flex-500
• .Flex-600
• .Flex-700
• .Flex-800
• .Flex-900
• .Flex-1000

The example below uses .Flex-900, which sets the child item to 900px width. If you shrink the screen size down you will notice once the screen reaches 900px the child changes to 100% width.

Flex Grow

When using flex, you can make one of the child items fill the entire remaining space using the .Flex-grow class.

This class is very effective when one item has significantly more content than another.

This example is displaying without the .Flex-grow class. You will see how the first child gets smooshed, because it is trying to fit all this content the best it can.

Now, see what happens once the .Flex-grow class is applied to the second child item with all the content. It recognizes that it needs to fit the content in the first child and then fill the remaining space with the second child that has the .Flex-grow class.

You can see how .Flex-grow can help you acheive quick alignments when applied with other classes. For example, lets apply the .Flex-centerV to the parent container to see how they will center align within the container. The parent container will have a height of 100px applied to make it easier to see the vertical alignment.

Now lets use .Flex-300 on the first child item to apply a fixed width, and watch how the second item with the .Flex-grow class fills the remaining space.

Conclusion and Next Steps

When used properly, Flex is a powerful tool that can help build out pages much faster, and with more flexibility than traditional block displays. When used with Grid layouts you can develop advanced layouts and user experiences. View the advanced layout section to see examples of Grid and Flex working together.

Advanced 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.