Flexy

View Source

A series of classes that use Flexbox to intelligently align elements together. These classes can be helpful to vertically align UI elements of varying heights.

Install

npm install seed-flexy --save

Dependencies

About

seed-flexy is a unique layout object class that uses flexbox to align items. seed-flexy classes are typically used in headers, footers, any other areas that require alignment of elements in a single line height.

Note: Items within will align to the outer edges of seed-flexy.

Example

.o-flexy supports responsive modifiers.

Woody
Buzz 
<div class="o-flexy">
  <div class="o-flexy__item">
    Woody
  </div>
  <div class="o-flexy__item">
    Buzz
  </div>
</div>

Flexy item

You can add as many .o-flexy__item elements within a .o-flexy as needed, and they will be spaced apart evenly.

Woody
Buzz
Jessie
Bullseye 
<div class="o-flexy">
  <div class="o-flexy__item">
    Woody
  </div>
  <div class="o-flexy__item">
    Buzz
  </div>
  <div class="o-flexy__item">
    Jessie
  </div>
  <div class="o-flexy__item">
    Bullseye
  </div>
</div>

Alignment

Aligning items within a .o-flexy element feels counter-intuitive compared to traditional (and straight-forward) float: left or float: right layout adjustments. To align an item a certain direction (left), the item’s opposite margin (margin-right) must be set to auto.

The utility class of u-mrg-*-auto (from seed-spacing) can be used control the alignment of your .o-flexy__item. Replace * with the direction opposite of the direction you wish to align your item.

Buzz (Aligned right)
Woody (Default)
Rex (Aligned left) 
<div class="o-flexy">
  <div class="o-flexy__item u-mrg-l-auto">
    Buzz (Aligned right)
  </div>
</div>
<div class="o-flexy">
  <div class="o-flexy__item">
    Woody (Default)
  </div>
  <div class="o-flexy__item u-mrg-r-auto">
    Rex (Aligned left)
  </div>
</div>

Flex block

.o-flexy__block is an element used to fill up space between or around .o-flexy__item elements.

Supports responsive modifiers.

Woody
Buzz
Rex
Slinky 
<div class="o-flexy">
  <div class="o-flexy__item">
    Woody
  </div>
  <div class="o-flexy__item">
    Buzz
  </div>
  <div class="o-flexy__block">
    Rex
  </div>
  <div class="o-flexy__item">
    Slinky
  </div>
</div>

Vertical alignment

You can apply the vertical alignment modifier class to adjust the vertically align the child elements within a .o-flexy.

All of the vertical alignment modifiers support responsive modifiers.

Class Vertical aligment CSS Property
.o-flexy--top Top align-items: flex-start
.o-flexy--middle Middle (Default) align-items: center
.o-flexy--bottom Bottom align-items: flex-end
😱 There's a…
🐍 snake…
👢 in my boot! 
<div class="o-flexy o-flexy--top">
  <div class="o-flexy__item">
    <span class="text-muted">😱 There's a…</span>
  </div>
</div>
<div class="o-flexy o-flexy--middle">
  <div class="o-flexy__item">
    <span class="text-muted">🐍 snake…</span>
  </div>
</div>
<div class="o-flexy o-flexy--bottom">
  <div class="o-flexy__item">
    <span class="text-muted">👢 in my boot!</span>
  </div>
</div>

Gap

The Gap modifier automatically provides a bit of spacing (margin) between the items and blocks within a Flexy object.

All of the gap spacing modifiers support responsive modifiers.

Class Margin
.o-flexy--gap-xs 4px
.o-flexy--gap-sm 8px
.o-flexy--gap-md 12px
.o-flexy--gap-lg 16px
.o-flexy--gap-xl 20px
With Gap:
Woody
Buzz
Rex
Slinky

Without Gap:
Woody
Buzz
Rex
Slinky 
With Gap:

<div class="o-flexy o-flexy--gap-lg">
  <div class="o-flexy__block">
    Woody
  </div>
  <div class="o-flexy__item">
    Buzz
  </div>
  <div class="o-flexy__item">
    Rex
  </div>
  <div class="o-flexy__item">
    Slinky
  </div>
</div>
<br>
Without Gap:
<div class="o-flexy">
  <div class="o-flexy__block">
    Woody
  </div>
  <div class="o-flexy__item">
    Buzz
  </div>
  <div class="o-flexy__item">
    Rex
  </div>
  <div class="o-flexy__item">
    Slinky
  </div>
</div>
<div class="o-flexy o-flexy--gap-lg">...</div>

Text truncation

At the moment, Flexbox doesn’t play nicely with CSS truncation (specifically the white-space: nowrap attribute. If you plan on using CSS truncation, avoid applying your truncation class directly on a .o-flexy__item or .o-flexy__block.

Summary:
Toy Story is a 1995 American computer-animated buddy-comedy adventure film produced by Pixar Animation Studios and released by Walt Disney Pictures. Directed by John Lasseter, Toy Story was the first feature-length computer-animated film and the first theatrical film produced by Pixar. 
<div class="o-flexy">
  <div class="o-flexy__item">
    Summary:
  </div>
  <div class="o-flexy__block">
    <div class="tx-truncate">
      Toy Story is a 1995 American computer-animated buddy-comedy adventure film produced
      by Pixar Animation Studios and released by Walt Disney Pictures. Directed by John Lasseter,
      Toy Story was the first feature-length computer-animated film and the first theatrical
      film produced by Pixar.
    </div>
  </div>
</div>

Configurations

Below are the default Sass configuration variables for seed-flexy. The variables can be found in the pack’s _config.scss file.

seed-flexy/_config.scss
// Namespaces
$seed-flexy-namespace: "o-flexy" !default;
$seed-flexy-item-namespace: #{$seed-flexy-namespace}__item !default;
$seed-flexy-block-namespace: #{$seed-flexy-namespace}__block !default;

// Alignment
$seed-flexy-alignment: (
  top: flex-start,
  middle: center,
  bottom: flex-end,
  stretch: stretch
) !default;

// Gap
$seed-flexy-gap-sizes: (
  xs: 4px,
  sm: 8px,
  md: 12px,
  lg: 16px,
  xl: 20px,
) !default;
↑Back to top