Layouts

Flex

The CSS flexible box layout module defines a CSS box model optimized for user interface design, and the layout of items in one dimension.

flex-stretch

DIV-1
DIV-2
DIV-3

Example Code 
<div class="flex-stretch">
  <div>DIV-1</div>
  <div>DIV-2</div>
  <div>DIV-3</div>
</div>

flex-stretch with gap

DIV-1
DIV-2
DIV-3

Example Code 
<div class="flex-stretch gap">
  <div>DIV-1</div>
  <div>DIV-2</div>
  <div>DIV-3</div>
</div>

Flex Sidebar

A sidebar layout using the CSS flexbox layout model.

DIV-1 fixed
DIV-2

Example Code 
<div class="flex-sidebar gap">
  <div>DIV-1 fixed</div>
  <div>DIV-2</div>
</div>

Flex sidebar right

DIV-1
DIV-2 Fixed

Example Code 
<div class="flex-sidebar-right gap">
  <div>DIV-1</div>
  <div>DIV-2 Fixed</div>
</div>

Flex sidebar row

DIV-1 fixed
DIV-2

Example Code 
<div class="flex-sidebar column">
  <div>DIV-1 fixed</div>
  <div>DIV-2</div>
</div>

Flex Golden

A flex layout with two child elements whose widths follow the golden ratio.

DIV-1
DIV-2

Example Code 
<div class="flex-golden gap">
  <div>DIV-1</div>
  <div>DIV-2</div>
</div>

Flex golden right

DIV-1
DIV-2

Example Code 
<div class="flex-golden-right gap">
  <div>DIV-1</div>
  <div>DIV-2</div>
</div>