Media WebUI

Overview

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). This is based on the flex container size, available space within it, and the size of flex items.

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.

flex-initial

Lorem ipsum
Lorem ipsum dolor sit amet
Lorem ipsum

flex-auto

Lorem ipsum
Lorem ipsum dolor sit amet
Lorem ipsum

flex-fit

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.
Lorem ipsum dolor sit amet

flex-size-4, flex-size-6, and flex-size-10

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.
Lorem ipsum dolor sit amet

flex-size-20, flex-size-5, and flex-auto

Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

flex-initial and flex-justify-space-around

Lorem ipsum
Lorem ipsum dolor sit amet
Lorem ipsum

flex-initial and flex-justify-space-between

Lorem ipsum
Lorem ipsum dolor sit amet
Lorem ipsum

High Level Classes

WebUI includes a set of high level classes that also set other default styles as shown in the following table.

Flex class
Styles
flex-row
white-space: normal, flex-flow: row wrap, flex: 1 1 auto
flex-row-reverse
white-space: normal, flex-flow: row-reverse wrap, flex: 1 1 auto
flex-col
white-space: normal, flex-flow: column nowrap, flex: 1 1 auto
flex-col-reverse
white-space: normal, flex-flow: column-reverse nowrap, flex: 1 1 auto

The following classes can be added to a parent element 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.

flex-cols-none
Sets all immediate children to: flex: 0 0 auto
flex-cols-auto
Sets all immediate children to: flex: 1 1 auto
flex-cols-initial
Sets all immediate children to: flex: 0 1 auto
flex-cols-expand
Sets all immediate children to: flex: 1 0 auto
flex-cols-fit
Sets all immediate children to: flex: 1 0 0%
Naming convention

All flexbox related classes are prefixed by flex-. This avoids any confusion between flexbox and non-flexbox classes.

Basic Structure

The examples below show how to make a very simple flexbox structure using some of the basic flexbox utility classes. The flex container is nothing more than a div being set to display: flex and using the defaults for flex-grow, flex-shrink, and flex-basis - in most cases this is sufficient for the container. Within that are two div tags, which automatically become flex items because they are immediate children of the flex container. The flex items have also been set to flex-grow so that they will each expand equally to use all available space in the flex container. Notice that the text content wraps within the flex element when the page width is reduced.

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="flex">
  <div class="flex-grow border-sm border-accent-4 background-accent-1-light pad-sm">
    Lorem ipsum dolor sit amet
  </div>
  <div class="flex-grow border-sm border-accent-4 background-accent-1-light 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-row and flex-col. However, flex-col stops any content from wrapping when the page width is reduced, and causes the flex element to break to the next line instead.

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="flex-row">
  <div class="flex-col border-sm border-accent-4 background-accent-1-light pad-sm">
    Lorem ipsum dolor sit amet
  </div>
  <div class="flex-col border-sm border-accent-4 background-accent-1-light pad-sm">
    Lorem ipsum dolor sit amet
  </div>
</div>

Flex Item Sizing

Much like the grid system, flex items can be given a size ranging from 1 to 20. Although they perform a similar function, the difference is that flex item sizes can be either vertical or horizontal, depending on the flex direction of the parent flex container. You can change the flex direction by using either flex-direction-row or flex-direction-column on the container.

The code below shows how to use flex item sizes.

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="flex-row">
  <div class="flex-size-6">
    <div class="flex-col border-sm border-accent-4 background-accent-1-light pad-xs">     
      Lorem ipsum dolor sit amet
    </div>
  </div>
  <div class="flex-size-14">
    <div class="flex-col border-sm border-accent-4 background-accent-1-light pad-xs">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

Using flex-size-* alone isn't sufficient for arranging html controls, unless you have a fixed width container. For text only content it may be all that is needed, however.

As you might expect, flex classes can be combined. In the following example flex-size-* is used with flex-col on the container. This causes the flex container to shrink or wrap content instead of allowing the content to overflow, and therefore behave more like a responsive container.

The code below shows how to use flex item sizes combined with column classes.

Example
Markup
<div class="flex-row">
  <div class="flex-size-6">
    <div class="flex-col border-sm border-accent-4 background-accent-1-light pad-xs">     
      <input type="text" class="input-sm rounded-sm" />
    </div>
  </div>
  <div class="flex-size-14">
    <div class="flex-col border-sm border-accent-4 background-accent-1-light pad-xs">
      <input type="text" class="input-sm rounded-sm" />
    </div>  
  </div>
</div>
Internet Explorer

The example above uses styling classes on the flex-col div only, and not on the flex-size-* div - this is for Internet Explorer compatibility.

If you are not targeting Internet Explorer, then only one div is needed with all classes added.

Flex Orientation

You can change the flex direction of immediate child elements 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.

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="flex-row">
  <div class="flex-size-6 flex-direction-column">     
    <div class="border-sm border-accent-4 background-accent-1-light pad-sm">
      Lorem ipsum dolor sit amet        
    </div>
    <div class="border-sm border-accent-4 background-accent-1-light pad-sm">
      Lorem ipsum dolor sit amet        
    </div>
  </div>
  <div class="flex-size-14 flex-direction-row">
    <div class="flex-grow border-sm border-accent-4 background-accent-1-light pad-sm">
      Lorem ipsum dolor sit amet
    </div>
    <div class="flex-grow border-sm border-accent-4 background-accent-1-light pad-sm">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>
Flex Direction

The default orientation is flex-direction-row, so you don't need to add this class unless you are changing a layout from column to row. For example, you might want to change a group of elements to a row layout within a column layout.

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.

Example
Heading
Main

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Navigation

  • Alerts
  • Carousel
  • Menus

Markup
<div class="container responsive-gutter-sm">
  <div class="flex-row">
    <div class="flex-col">
      <div class="panel background-accent-1-light text-center">
      <b>Heading</b>
      </div>
    </div>  
  </div>
  <div class="flex-row">
    <div class="flex-size-15 flex-respond-bp-2-under">
      <div class="area background-accent-2-light height-full">
        <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-5 flex-respond-bp-2-under flex-order-first-bp-2-under">
      <div class="area background-accent-4-light height-full">
        <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 traditional 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-Grids-Layouts.html demo page, with the install or download package.

Media Breakpoint Utilities

Almost all flexbox utility classes will have corresponding breakpoint specific versions.

Naming convention

Breakpoints are numbered 1 to 5, with 1 being the smallest. A breakpoint suffix can be added to most utility class using the format -bp-[breakpoint number]-[direction]. The direction is either under or over.

For example -bp-1-under or -bp-3-over.

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="flex-row">
  <div class="flex-size-6 flex-size-14-bp-4-under flex-size-10-bp-2-under">     
    <div class="flex-col pad-xs border-sm border-accent-4 background-accent-1-light">
      Lorem ipsum dolor sit amet        
    </div>
  </div>
  <div class="flex-size-14 flex-size-6-bp-4-under flex-size-10-bp-2-under">
    <div class="flex-col pad-xs border-sm border-accent-4 background-accent-1-light">
      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 14 making a total of 20 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.