Codebase 6 Layouts: Flexbox

Normally in HTML, block elements span 100% of the available width and they stack vertically, one under he other starting from the top of the browser window (known as the viewport). CSS flexbox styling enables blocks to be arranged and aligned horizontally or vertically, with each block width being controlled or made to shrink according to the content inside it.

Codebase’s flex layout system uses flexbox, enabling 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).

Notes on flex

1. Besides the flex wrapper that creates a flexbox context, there are also responsive prefix flex wrappers: xs:flex, sm:flex, md:flex and lg:flex. The flexbox effect for these responsive wrappers will take effect at extra-small, small, medium or large viewport widths. See responsive flex modifier tiers for more information.

   Flex system wrapper	Effect
   flex	Flexbox for all viewport widths
   xs:flex	Flexbox from 568px up
   sm:flex	Flexbox from 768px up
   md:flex	Flexbox from 1024px up
   lg:flex	Flexbox from 1280px up

   Below these breakpoints (listed above), the child block element layout will be displayed the default way: all stacked in a single column with 100% width.
2. The flexbox modifier classes documented below (gap-3, flex-wrap, etc.) will all just work as expected with these responsive prefixed flex wrappers – they will only take effect above the specified (lowest) breakpoint.
3. All flexbox system wrappers affect their immediate child elements (i.e. flex-items).
4. If you want to set up a grid, it’s not flex you need. Instead, use the Codebase layout grid system.
5. By default, flex sytems do not wrap their content onto a new row if there is not enough space available. So, if you require wrapping, use flex flex-wrap.

Setting up a flex

All you need is flex on a wrapper. Now you have a starting point for a toolbar or menubar.

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

Columnar flexbox

You can also turn the flexbox mechanism thorugh 90° using flex flex-column. Flex columns are useful for setting up cards and hero sections.

Stretching flex items

There are 3 ways that you can expand flex items horizontally to “fill” a row.

(1.) Growing equally

If you want your flex items to all stretch equally, add flex-grow-equal to the flex wrapper:

<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 require a number of equal width columns (e.g. for a “two up” or “three up”). You can easily use a breakpoint width prefix on the wrapper (e.g. usemd:flex instead of flex), so that your flexbox takes effect only above that viewport width.

(2.) Growing unequally

If you want to make the flex items stretch unequally, according to their content, then add flex-grow-auto to the flex wrapper:

flex flex-grow-auto :

(3.) Growing individual flex items

Adding the flexbox grow utility to a flex item will expand it to occupy the available space. grow only take effect inside of a flex wrapper (and only then if above your specified breakpoint width, whether -xs, -sm, -md or -lg).

Examples of grow:

<div class="flex">
  <div class="grow">grow</div>
  <div>x</div>
</div>

<div class="flex">
  <div>x</div>
  <div>x</div>
  <div class="grow">grow</div>
  <div>x</div>
  <div>x</div>
  <div>x</div>
</div>

With flex flex-column:

<div class="flex flex-column" style="height: 250px">
  <div>x</div>
  <div class="grow>grow</div>
</div>

Wrapping flex items

By default, flex does not cause flex items to wrap. If you require wrapping, add flex-wrap to the flexbox wrapper.

To see the effect flex-wrap, make your viewport narrower intil the last item on the example below wraps to a new row. Compage this with the previous example to see the difference.

Adding gaps between flex items

There are two ways to add gaps in flex sets.

(1.) Flexbox gaps using gap-*

gap-* — adds a horizontal gap btween flex items in a row, and the same gap between rows if there’s wrapping.

• gap-tiny — using --s-tiny
• gap-1 — using --s-1
• gap-2 — using --s-2
• gap-3 — using --s-3
• gap-4 — using --s-4

E.g. flex gap-2:

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

Notes on gap-*:

1. gap-* is also used in grid layouts.
2. flex and grid gaps have the same spacing CSS variables as decoration margins and paddings.

(2.) Flexbox spacing

flex flex-space-between:

flex flex-space-around:

Alignment of flex items

Horizontal alignment

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

Vertical alignment

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:

Alternatively, use place-center — see layout positioning.

Responsive flex modifier tiers

In addition to the flex setup class, you can also override each of the flex modifier classes at the xs, sm, md, and lg breakpoint widths:

• flex-start / flex-center / flex-end
• flex-top / flex-middle / flex-bottom
• flex-column / flex-column-reverse
• flex-row / flex-row-reverse
• flex-space-around / flex-space-between / flex-space-evenly
• flex-grow-auto / flex-grow-equal
• flex-wrap

All this enables you to create layout components that use flexbox positioning, orienting, ordering, spacing, growing (stretching), and wrapping differently for different devices.

A simple example: in this menubar, the links are centered for small viewports and right-aligned for medium viewports up:

<nav class="p-cell flex flex-center md:flex-end gap-2 bg-gray bg-100">
  <a href="">About</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>