Flexbox Content Fit

You can control how content fits in a flexbox layout.

Align Self

• align-self{-BR}-{TYP}
  • BR:
    sm md lg xl xxl
  • TYP:
    start end center baseline stretch

Try it

This utility is for individual items inside flex containers and lets you control their alignment separate from what the others are doing.

align-items-start - aligns the element to the top

align-items-end - aligns it to the bottom

align-items-center -centers it vertically

align-items-baseline - aligns the element to its baseline. If you use this on two different elements, they will both try to align to their baselines

align-items-stretch - stretches them to fit the space vertically.

Flex Fill

• flex{-BR}-fill
  • BR:
    sm md lg xl xxl

Try it

This utility makes one or more individual elements try to take up the available horizontal space if possible. If there are more than one elements with flex-fill, then they'll share all of the available space.

Flex Grow/Shrink

• flex{-BR}{-TYP}{-BOOL}
  • BR:
    sm md lg xl xxl
  • TYP:
    grow shrink
  • BOOL:
    0 1

Try it

This is similar to flex fill but with the ability to toggle on or off through some classes.

You can specify that an item try to grow to fill the available space with grow or shrink

There are two classes that either turn this ability off (0) or on (1)

In the example you can see that flex grow 1 works just like flex fill. If you change the class to 0, it will change turn this off.

In the example for flex-shrink notice that the other two cells use a flex-grow-1, but they also try to take up 50% of the width of the container. In that case flex-shrink will try to take up as little space as is reasonable.