Flexbox

One of the ways you can choose to organize your layouts is using the flexbox properties.

Flex Direction

• flex(-TYP)(-DIR)
  • TYP
    
    row col
  • DIR
    
    reverse

Docs Try it

You can control the direction that flexbox operates in a few different ways. In addition to adding a flex class, you can add a direction type with a direction option.

Flex Wrap

flex-wrap flex-wrap-reverse flex-nowrap

Docs Try it

You can tell an item to wrap to a next line or not with these classes. The default is for items not to wrap, but you can also have them wrap in reverse.

Flex

flex-1 flex-auto flex-initial flex-none

Docs Try it

Flex elements can grown and shrink, so there's a set of classes that let you control that.

flex-1 lets an item grow and shrink as needed, but ignores the original size.

flex-auto lets an item grow and shrink as needed, taking into account the original size.

flex-initial lets an item shrink, but not grow.

flex-none prevents an item from growing or shrinking.

Flex Grow

flex-grow-0 flex-grow

Docs Try it

There's a couple of tags that you can also use to control wether an item grows to fit space as well, but it's a bit different than the previous items.

flex-grow lets an item grow to fit the available space.

flex-grow-0 prevents and item from growning.

Flex Shrink

flex-shrink-0 flex-shrink

Docs Try it

Like grow, the shrink classes control how an element shrinks.

flex-shrink-0 prevents an item from shrinking

flex-shrink allows an item to shrink if needed.

Order

• order(-ORD)
  • ORD
    
    1 2 3 4 5 6 7 8 9 10 11 12

first last none

Docs Try it

Order lets you control the order that the items in a container appear in. You can assign more than one item the same order and they sort of work like layers, keeping items with the same order together.

There's a couple of named classes. first attempts to put an item first and has precendence over the other numbers. last does the same thing for the end. None is like a special order of zero.