Flexbox
Basic Concepts
Flexbox was designed to improve the arrangement and layout of content whatever the size or quantity, but was never intended to be a replacement for grid systems, and can be introduced to existing markup as an enhancement. Flexbox is by no means an all or nothing solution, and was specifically given the capability to override existing CSS behaviours in many cases.
So how does it work? Flexbox is designed around the idea of a flex container (the parent element) and flex items (the child elements). The browser will calculate when a flex item should be repositioned, resized, or wrapped (if flex-wrap is enabled). Flexbox attempts to accomodate any content by distributing the available space, and so it is a content driven system.
WebUI supports the full range of flexbox features providing a comprehensive set of utility classes, including media breakpoint specific equivalents. The following examples show some of the configurations that can be used.
A set of flex item sizing classes (1 - 24) are also available. These classes are percentage based representing a proportion of the main axis or cross axis within a flex container, which depends on the flex direction specified. More information about sizing can be found in the Flexbox Item Sizing section below.
To support layouts generally, WebUI includes a comprehensive set of layout property classes for alignment, justification, spacing and padding. These can be used for flexbox, CSS grid, or multi-column layouts. A list of these properties can be found in the Layout Properties section.
Simple Flexbox Examples
The examples below show how to make very simple structures using flexbox classes.
<div class="flex accent-2-dark">
<div class="flex-grow border-xs border-accent-2 pad-sm">
Lorem ipsum dolor sit amet
</div>
<div class="flex-grow border-xs border-accent-2 pad-sm">
Lorem ipsum dolor sit amet
</div>
</div>
Another way to do a similar thing is by using the high level classes such as flex-container and flex-col.
<div class="flex-container accent-2-dark">
<div class="flex-col border-xs border-accent-2 pad-sm">
Lorem ipsum dolor sit amet
</div>
<div class="flex-col border-xs border-accent-2 pad-sm">
Lorem ipsum dolor sit amet
</div>
</div>
Flexbox Classes
Flexbox classes do not implement a grid system like the WebUI layout classes, but are provided as a more direct way to use flexbox. Some basic understanding of flexbox is assumed.
Naming conventionAll flexbox related classes are prefixed by flex-. This avoids any confusion between flexbox and non-flexbox classes.
High-Level Classes
WebUI includes a set of high level flexbox classes that also set other default styles. Although both rows and columns can be defined, they are not the same as layout rows and columns that must be used together. Instead, they are intended to be used independently.
The flex-container class does not have to be used, since it is provided for convenience only. It defines a couple of defaults, such as display type flex and relative positioning. The flex class can be used on its own instead.
NOTE: Any of the following classes can be used as a flex container, depending on your requirements.
| Class | Description |
|---|---|
| flex-container | Defines a flexbox container with relative positioning. Child elements are not wrapped or constrained. |
| flex-row | Defines a flexbox row. Child elements are wrapped when they cannot fit within the width of a single row. |
| flex-row-reverse | Similar to flex-row, but flex items are displayed in reverse order. |
| flex-col | Defines a flexbox column. Child elements are not wrapped. |
| flex-col-reverse | Similar to flex-col, but flex items are displayed in reverse order. |
High-Level Class Examples
The following examples demonstrate the use of flexbox high-level classes.
<div class="flex-row accent-2-dark">
<div class="flex-size-6 border-xs border-accent-2 pad-md">
Flex item 1
</div>
<div class="flex-size-6 border-xs border-accent-2 pad-md">
Flex item 2
</div>
<div class="flex-size-6 border-xs border-accent-2 pad-md">
Flex item 3
</div>
</div>
<div class="flex-row-reverse accent-2-dark">
<div class="flex-size-6 border-xs border-accent-2 pad-md">
Flex item 1
</div>
<div class="flex-size-6 border-xs border-accent-2 pad-md">
Flex item 2
</div>
<div class="flex-size-6 border-xs border-accent-2 pad-md">
Flex item 3
</div>
</div>
<div class="flex-col accent-2-dark height-lg-xl">
<div class="flex-size-4 border-xs border-accent-2 pad-md">
Flex item 1
</div>
<div class="flex-size-4 border-xs border-accent-2 pad-md">
Flex item 2
</div>
<div class="flex-size-4 border-xs border-accent-2 pad-md">
Flex item 3
</div>
</div>
<div class="flex-col-reverse accent-2-dark height-lg-xl">
<div class="flex-size-4 border-xs border-accent-2 pad-md">
Flex item 1
</div>
<div class="flex-size-4 border-xs border-accent-2 pad-md">
Flex item 2
</div>
<div class="flex-size-4 border-xs border-accent-2 pad-md">
Flex item 3
</div>
</div>
Shortcut Classes
The following shortcut classes can be added to a parent element (container) including flex rows / columns, to affect all immediate children instead of adding flex-auto, flex-initial, flex-expand, flex-fit, or flex-none to each of the child elements.
NOTE: The following classes are not flex containers, but set the flex-grow, flex-shrink and flex-basis properties for flex items within a container.
| Class | Description |
|---|---|
| flex-items-auto | Sets all immediate children to: flex: 1 1 auto |
| flex-items-initial | Sets all immediate children to: flex: 0 1 auto |
| flex-items-expand | Sets all immediate children to: flex: 1 0 auto |
| flex-items-fit | Sets all immediate children to: flex: 1 0 0% |
| flex-items-none | Sets all immediate children to: flex: 0 0 auto |
Shortcut Class Examples
The following examples show how to use flexbox shortcut classes to affect all direct child elements. This approach is useful if all flex items require the same behaviour.
<div class="flex-row flex-items-initial accent-2-dark">
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
</div>
<div class="flex-container flex-items-auto accent-2-dark">
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet, ius an possit alterum commune.
</div>
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
</div>
<div class="flex-container flex-items-fit accent-2-dark">
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet, ius an possit alterum commune.
</div>
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
</div>
<div class="flex-row flex-items-expand accent-2-dark">
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
<div class="border-xs border-accent-2 pad-md">
Lorem ipsum dolor
</div>
</div>
Using layout property classes for spacing
<div class="flex-container justify-content-space-around accent-2-dark">
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum
</div>
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet
</div>
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum
</div>
</div>
<div class="flex-container justify-content-space-between accent-2-dark">
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum
</div>
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet
</div>
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum
</div>
</div>
<div class="flex-container justify-content-space-evenly accent-2-dark">
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum
</div>
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet
</div>
<div class="flex-initial border-xs border-accent-2 pad-md">
Lorem ipsum
</div>
</div>
For more information about layout properties see the Layout Properties section.
Flex Item Sizing
WebUI includes a set of flex item sizing classes (1 - 24). These classes are percentage based representing a proportion of the main axis within a flex container. The orientation of the main axis depends on the flex direction specified. The size affects the flex-basis of a flex-item.
<div class="flex-container accent-2-dark">
<div class="flex-size-4 border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet
</div>
<div class="flex-size-6 border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.
</div>
<div class="flex-size-14 border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="flex-row accent-2-dark">
<div class="flex-size-10 flex-respond-bp-3-under border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.
</div>
<div class="flex-size-5 flex-respond-bp-3-under border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet
</div>
<div class="flex-auto flex-respond-bp-3-under border-xs border-accent-2 pad-md">
Lorem ipsum dolor sit amet
</div>
</div>
Flex classes can be combined. In the following example flex-col is used with flex-size-* within a flex row. This causes the flex column content to fill the space allowed by the flex-size-* class, and therefore behave more like a responsive container.
The code below shows how to use flex item sizes combined with column classes.
<div class="flex-row accent-2-dark">
<div class="flex-col flex-size-8 border-xs border-accent-2 pad-xs">
<input type="text" class="input-sm rounded-sm" />
</div>
<div class="flex-col flex-size-16 border-xs border-accent-2 pad-xs">
<input type="text" class="input-sm rounded-sm" />
</div>
</div>
Flex Orientation
The flex direction of immediate child elements can be changed by using either flex-direction-row or flex-direction-column on the containing element.
The effect is that, using flex-direction-row on the containing element will cause the immediate children to flow inline. On the other hand, using flex-direction-column instead means that the immediate children will be stacked.
<div class="flex-container flex-direction-column accent-2-dark">
<div class="flex-grow border-xs border-accent-2 pad-sm">
Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.
</div>
<div class="flex-grow border-xs border-accent-2 pad-sm">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="flex-container flex-direction-row accent-2-dark">
<div class="flex-grow border-xs border-accent-2 pad-sm">
Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.
</div>
<div class="flex-grow border-xs border-accent-2 pad-sm">
Lorem ipsum dolor sit amet
</div>
</div>
Flex DirectionThe default orientation is flex-direction-row, so this class is not required unless it is being changed from column to row. Other scenarios include when a flex container is set to a column layout, but a subset of child elements need to be defined as rows.
Layouts
It is possible to layout an entire site using primarily flexbox, due to some of it's unique capabilities, but you should continue to use traditional techniques where it makes sense. Flexbox is all about content driven design, where contained html elements can stretch, grow, shrink, or wrap, depending on available space. You might then ask, so how does this play in terms of a responsive web design?
Given a flex container and a set of flex items within the container, you can construct a fully responsive layout without the need for media queries or breakpoints - however, media queries may be needed for more complex layouts or device related requirements, for example. Flexbox excels when it comes to alignment and spacing, which can dramatically reduce the dependence on margin and padding adjustments. It is a great solution for arranging html elements within components.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
- Alerts
- Carousel
- Menus
<div class="container responsive-gutter-sm accent-2-dark">
<div class="flex-row">
<div class="flex-col border-xs border-accent-2">
<div class="text-center pad-md">
<b>Heading</b>
</div>
</div>
</div>
<div class="flex-row">
<div class="flex-size-16 flex-respond-bp-2-under border-xs border-accent-2">
<div class="height-full pad-xl">
<b>Main</b>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
<div class="flex-size-8 flex-respond-bp-2-under order-first-bp-2-under border-xs border-accent-2">
<div class="height-full pad-xl">
<b>Navigation</b>
<p>
<ul class="list list-spacing-md">
<li>Alerts</li>
<li>Carousel</li>
<li>Menus</li>
</ul>
</p>
</div>
</div>
</div>
</div>
As with the layout grid system, there are also utility classes to make flex items wrap and expand to the full width of the container at specific breakpoints. Also, flex items can be ordered visually, which is very useful for arranging components for mobile devices after being stacked. You can see both of these utilities used in the example above.
See the DEMO-Layouts and tables.html demo page, with the install or download package.
Media Breakpoint Utilities
Breakpoint Utility Classes
Almost all high-level flexbox utility classes will have corresponding breakpoint specific versions. See the example below.
Naming conventionBreakpoints are numbered 1 to 5, with 1 being the smallest. A breakpoint suffix can be added to most utility classes using the format -bp-[breakpoint number]-[direction]. The direction is either under or over.
For example -bp-1-under or -bp-3-over.
<div class="flex-row accent-2-dark">
<div class="flex-size-6 flex-size-18-bp-4-under flex-size-12-bp-2-under">
<div class="border-xs border-accent-2 pad-md height-full">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="flex-size-18 flex-size-6-bp-4-under flex-size-12-bp-2-under">
<div class="border-xs border-accent-2 pad-md height-full">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
In the example above, each flex item has one default size applied and two further breakpoint sizes - this will cause each flex item to change size at each of those breakpoints. They will start off at 6 and 18 making a total of 24 for the largest screen size, then swap sizes at breakpoint 4, and change to 2 equal sizes at breakpoint 2.
See the Media Breakpoints section for more information on using breakpoints.
Flexbox Properties
Standard Flexbox Classes
The following classes can be used in flexbox layouts.
| Class group | Class names | Description |
|---|---|---|
| flex, flex-* | flex flex-inline |
Sets an element to display: flex or display: flex-inline. |
| flex-inherit | flex-inherit | Sets a flex-item to flex: inherit. |
| flex-grow | flex-grow | Sets a flex-item to flex-grow: 1. |
| flex-shrink | flex-shrink | Sets a flex-item to flex-shrink: 1. |
| flex-auto | flex-auto | Sets a flex-item to flex: 1 1 auto. |
| flex-initial | flex-initial | Sets a flex-item to flex: 0 1 auto. |
| flex-expand | flex-expand | Sets a flex-item to flex: 1 0 auto. |
| flex-fit | flex-fit | Sets a flex-item to flex: 1 0 0%. |
| flex-none | flex-none | Sets a flex-item to flex: 0 0 auto. |
| flex-size-* | flex-size-[proportion] | Adjusts flex-basis of a flex item to the specified proportion of the main axis (1 - 24), e.g. flex-size-4, flex-size-16, flex-size-24. |
| flex-basis-* | flex-basis-auto flex-basis-content flex-basis-min-content flex-basis-max-content flex-basis-fit-content |
Used to set the flex-basis for a flex item. |
| flex-wrap, flex-wrap-* | flex-wrap flex-wrap-reverse flex-nowrap |
Used to set how flex items wrap within a flex container. |