Flex System

Codebase’s .flex flexbox layout system enables you to organize wrapped groups of elements in a row (e.g. for a menubar, or a media object) or in a column (e.g. for a card).

All the following examples below use .flex as-is, so that the demos can be seen at all screen widths. There are also alternative (not modifier) responsive flex wrappers .flex-sm, .flex-md and .flex-lg that can be used instead of .flex. Thus the flexbox effect will kick in at small, medium or large viewport widths – below these breakpoints the child block element layout will be as normal, stacked in a single column of 100% width. The same modifier classes below will all just work with these alternative responsive .flex- wrappers.

Notes:

1. All flexbox system wrappers affect their immediate child elements.
2. All Codebase flexbox sytems will wrap their content onto a new row if there is not enough available width to keep everything on one row. (If you want to prevent flex-row wrapping, use .flex.flex-nowrap.)

.flex:

<div class="flex">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

The .flex wrapper, and its breakpoint width variants (see above), is great for making menubars.

.flex.flex-grow-equal :

<div class="flex flex-grow-equal">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

.flex-grow-equal may be all you need if you want a number of equal width columns (e.g. for a “two up” or “three up”). You can easily combine it with a flex system wrapper with built-in breakpoint width (e.g. .flex-md) instead of .flex, so that your mini “pseudo grid” takes effect only above that device width (or window width).

Codebase also contains a simple 12-column flexbox pseudo grid if you need it – e.g. if you need a (pseudo) grid system that supports ancient web browsers. But for more power, go for Codebase’s real CSS grid grid system.

.flex.flex-grow-auto :

.flex.flex-gap.flex-grow-auto :

.flex.flex-space-between:

.flex.flex-space-around:

.flex.flex-start / .flex.flex-center / .flex.flex-end:

.flex.flex-top / .flex.flex-middle / .flex.flex-bottom:

.flex.flex-center.flex-middle:

Same as above but with .flex-column:

.flex.flex-column.flex-center.flex-middle:

Flex items

• .flex-item-grow-1 – does not have a max-width – it will simply expand to occupy the available space.
• .flex-item-order-start - re-orders a flex-item to order: 0
• .flex-item-order-end - re-orders a flex-item to order: 9999

Note that these flex item will only take effect inside of a .flex wrapper (and only then if above your specified breakpoint width, whether sm, md or lg).

Examples of .flex-item-grow-1:

With .flex.flex-column: