Lexicon v1.0.32

Simple Flexbox Grid

Simple Flexbox Grid

Simple Flexbox Grid was created to help layout small chunks of content more efficiently because vertical alignment, equal heights, and auto fitting content in CSS is incredibly time consuming. This grid was designed to cover some specific cases not covered by bootstrap 3's grid. If you wish to use bootstrap 3's grid inside Simple Flexbox Grid, it only reliably works with col-xs-(# of columns) in its current state.

Use flex-container to define the container for your grid, any elements that are direct children are now part of your grid. By default, each item will only be as wide as its content.

Some content
Single shot extraction, qui beans saucer seasonal robust.
Some content

Auto Fitting Content

Adding class flex-item-expand to any direct child will expand the element to fill the remaining space.
Some content
Single shot extraction, qui beans saucer seasonal robust.
Some content

Full Width Flex Items

Adding class flex-item-full to any direct child will expand the element to fill 100% of the container width.

Some content
Single shot extraction, qui beans saucer seasonal robust.
Some content

Equal Height Columns

Columns with the Simple Flexbox Grid are always equal height. If you change the height of one column, the other column's height will change, unless a fixed height is set via css.

150px x 150px
Expand to fill rest of space.

Vertical Centering

Wrap each of the texts in <div class="flex-item-center"></div> and add class flex-container to the parent of each flex-item-center to vertically center. Horizontally center an item with css margin-left: auto; margin-right: auto;

150px x 150px
Expand to fill rest of space.

Nesting the Simple Flexbox Grid

Adding flex-container to an element creates a new container for the Simple Flexbox Grid, and allows you to start a new grid inside.

150px x 150px
Nested Grid
Expand to fill rest of space.
Aged bar, percolator siphon barista coffee extraction. Whipped sugar americano id decaffeinated as trifecta foam black beans at frappuccino. Strong coffee, extraction mocha foam, coffee dripper americano medium viennese.

Stacking Flex Containers

Make flex-container stack all its direct descendants at specific screen widths with classes:

  • flex-container-stacked-xxs 479px and below.
  • flex-container-stacked-xs 767px and below.
  • flex-container-stacked-sm 991px and below.
  • flex-container-stacked-md 1199px and below.
  • flex-container-stacked-lg 1200px and above.
  • flex-container-stacked-xs-only between 480px and 767px.
  • flex-container-stacked-sm-only between 768px and 991px.
  • flex-container-stacked-md-only between 992px and 1199px.
150px x 150px
Nested Grid
Expand to fill rest of space.
Aged bar, percolator siphon barista coffee extraction. Whipped sugar americano id decaffeinated as trifecta foam black beans at frappuccino. Strong coffee, extraction mocha foam, coffee dripper americano medium viennese.

Force Flex Items to Break into New Lines

Force a direct descendant of flex-container to break to a new line with classes:

  • flex-item-break-xxs 479px and below.
  • flex-item-break-xs 767px and below.
  • flex-item-break-sm 991px and below.
  • flex-item-break-md 1199px and below.
  • flex-item-break-lg 1200px and above.
  • flex-item-break-xs-only between 480px and 767px.
  • flex-item-break-sm-only between 768px and 991px.
  • flex-item-break-md-only between 992px and 1199px.
150px x 150px
Nested Grid
Expand to fill rest of space.
Aged bar, percolator siphon barista coffee extraction. Whipped sugar americano id decaffeinated as trifecta foam black beans at frappuccino. Strong coffee, extraction mocha foam, coffee dripper americano medium viennese.