Flexbox

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

Notes on flex

1. Besides flex (takes effect at all screen widths), 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.

   Flex system wrapper	Effect
   flex	display: flex; for all viewport widths
   xs:flex	display: flex; from 568px (default) up
   sm:flex	display: flex; from 768px (default) up
   md:flex	display: flex; from 1024px (default) up
   lg:flex	display: flex; from 1280px (default) up

   Below these breakpoints 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 (flex-gap, 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. flex is not used for a pseudo grid system. Instead, Carbon has a real grid that uses CSS Grid Layout.

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.

6. If required, you can override a flexbox at a wider breakpoint the element so that it is back to being a full-width block, using a responsive block utility.

Setting up a flex flexbox

All you need is flex:

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

Columnar flexbox

You can also rotate the flexbox mechanism 90° using flex flex-col.

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

Stretching flex items

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

Note: it’s also possible to cause individual flex items to grow – see growing individual flex items below.

Equal stretching

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. You can 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.

Unequal stretching

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 :

Flex item wrapping

By default, flex does not cause flex items to wrap if there’s not enough horizontal space for them. If you require wrapping, add flex-wrap to the flexbox wrapper.

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

Using flex-grow to stretch individual flex items

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

Examples of grow:

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

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

With flex flex-col (and the flex wrapper has style="block-size: 250px" for this demo):

<div class="flex flex-col" style="block-size: 250px">
  <div>x</div>
  <div class="flex-grow">grow</div>
</div>

Adding a gap

There are two ways to add gaps in flex sets.

Gaps using flex-gap

Carbon uses flexbox-gap style rule for flex gaps.

If you want a gap between flex items, add flex-gap to the flex wrapper:

However, the old flexbox hap hack only added gaps vertically between columns. The flex-gap utility can also add gaps horizontally between rows:

Other ways to add white space

flex justify-between:

flex justify-around:

Alignment of flex items

Horizontal alignment

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

Vertical alignment

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

flex justify-center items-center:

Same as above but with flex-col:

flex flex-col justify-center items-center: