Flexbox Organization

go.raybo.org/4AJF

Certain flex classes help you organize the content within

Flex Wrap

  • flex{-BR}{-TYP}{-reverse}
    • BR: sm md lg xl xxl
    • TYP: wrap nowrap

Try it

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

wrap - Wrap will cause the elements to wrap to a new line if the container is a certain width

nowrap - causes the elements to ignore the size of the container and refuse to wrap the elements. This is the default

The reverse option reverses the order of the elements.

Order

  • order{-BR}{-AMT}
    • BR:
      sm md lg xl xxl
    • AMT:
      first 0 1 2 3 4 5 last

Try it

The order classes let you reorder elements differently than in their natural order. They act more like horizontal layers, so if we have two elements with an order of last, they will be drawn next to each other with the one that is coded first in the first position. You can use these classes to re-order items.

Align Content

  • align-content{-BR}{-TYP}
    • BR:
      sm md lg xl xxl
    • TYP:
      start end center between around stretch

Try it

Align content lets you align elements that are wrapping in different in the cross axis...normally vertically.

start - puts them at the beginning

end - places the items towards the end of the container

center - centers them within the container

between - pushes the items flush with the edges

around - puts equal amounts of space around the items

stretch - stretches the items to fit the available space in the containers.