CSS Flexboxes

The display: flex; property can be used to manipulate items within it to make clean rows and columns and more. More so, bootstrap uses flexboxes to style their grid.

By default, the flexboxes will not wrap, will be the width of their content, and the height of the parent. (resize to see).

The flex direction property:

• row (default)
• column
• row-reverse
• column-reverse

The flex direction property:

• nowrap (default)
• wrap
• wrap-reverse

Justify Content:

• center
• flex-start (default)
• flex-end
• space-around
• space-between
• space-evenly

Align Items:

• center
• flex-start
• flex-end
• stretch (default)
• baseline
• normal

Note that the align-items and justify-content essentially switch if you make a row a column

• Justify-content: center
• Justify-content: flex-start (default)
• Justify-content: flex-end
• Justify-content: space-around
• Justify-content: space-between
• Justify-content: space-evenly
• Align-items: center
• Align-items: flex-start
• Align-items: flex-end
• Align-items: stretch (default)
• Align-items: baseline
• Align-items: normal
• row (default)
• column
• row-reverse
• column-reverse

Flex Items (the children of the flex container)

The direct child element of a display: flex; element automatically becomes a flex item, and has some of the following options available.

Align-Self

This makes an individual child align itself, instead of the align-items property on the parent that affects all the children.

• center
• flex-start
• flex-end
• stretch (default)
• baseline
• normal

Order

You can use the order property to rearrange flex items. The default value for all items in a flexbox is zero. Change the number in the boxes below to see their order

You can use this to re order elements in a section you don't have control over, like the review widget.

Bootstrap classes for this are "order-[0-12]" and work with breakpoints to rearrange items in rows at different screen sizes.

The flex-grow property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. (0 is default)

The flex-shrink property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. (1 is default)

The flex-basis property

The flex-basis property specifies the initial length of a flex item.

Note that without the flex wrap, they are still constrained to the flexbox, and don't break out unless it gets smaller than the content.

If the row has a flex-wrap, then the content will wrap instead of stop growing.

The flex property

The flex property is a shorthand property that combines flex-grow, flex-shrink, and flex-basis.