American Express American Express |

Flexbox

Flexible Layout

The Flexbox layout (Flexible Box) provides an efficient way to lay out, align and distribute space among items in a card, even when their size is unknown and/or dynamic.

It gives the card the ability to alter its items’ dimension and order to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex card expands items to fill available free space, or shrinks them to prevent overflow.

Usage

The Flexbox layout is direction-agnostic, as opposed to regular layouts (vertically-based blocks and inline blocks that are horizontally-based). While regular layouts work well for pages, they lack flexibility to support large or complex applications, especially when it comes to orientation changing, resizing, stretching, shrinking, etc.

The Flexbox layout is most appropriate to use for components, and with small-scale layouts, while the Grid layout is intended for larger scale layouts.

Example - Flexbox

Copy
<div class="container margin-0-l pad-0-l">
  <h2 class="heading-4 dls-white dls-bright-blue-bg pad">Special Promotions for You</h2>
  <div class="row">
    <div class="flex flex-column col-md-4 pad-tb text-align-center pad-3-lr border-xs-b stack">
      <span class="icon dls-icon-hotel icon-lg margin-1-b dls-bright-blue"></span>
      <h2 class="heading-3 dls-gray-05">72 Hour Hotel Sale</h2>
      <p>Save up to 30% when you book select all-inclusive properties by March 16th, 2017. Terms apply.</p>
      <a class="btn btn-secondary btn-block margin-auto-t margin-auto-lr" href="#example">Book Now</a>
    </div>

    <div class="flex flex-column col-md-4 pad-tb text-align-center pad-3-lr border-xs-b stack">
      <span class="icon dls-icon-rewards icon-lg margin-1-b dls-bright-blue"></span>
      <h2 class="heading-3 dls-gray-05">Transfer Points with Ease</h2>
      <p>Get travel rewards in a flash! Now, it’s easier than ever to trasfer points to participating airline, hotel loyalty programs. Terms apply.</p>
      <a class="btn btn-secondary btn-block margin-auto-t margin-auto-lr" href="#example">Transfer Now</a>
    </div>

    <div class="flex flex-column col-md-4 pad-tb text-align-center pad-3-lr border-xs-b stack">
      <span class="icon dls-icon-card-benefit icon-lg margin-1-b dls-bright-blue"></span>
      <h2 class="heading-3 dls-gray-05">Experience IfOnly</h2>
      <p>Use 30-50% fewer points on unforgettable experiences from IfOnly. Enjoy cooking classes and more! Offer ends 4/9/17. Terms apply.</p>
      <a class="btn btn-secondary btn-block margin-auto-t margin-auto-lr" href="#example">Shop Now</a>
    </div>
  </div>
</div>