Flexbox

Flexbox is a great way to make a site responsive. The size, spacing and positioning of the boxes can be adjusted according to the screen size.

This is tutorial by CSS-Tricks gives a good overview of how to implement this CSS class and its attributes.

Adding the property display: flex to the parent element makes it a flex container. All underlying children are automatically flex items.

Properties of the flex container

• flex-direction
  • row (default): left to right.
  • row-reverse: right to left.
  • column: top to bottom.
  • column-reverse: bottom to top.
• flex-wrap
  • wrap
  • wrap-reverse
  • nowrap (default)
• flex-flow: combines both the flex-direction and flex-wrap in a single property.
• justify-content: horizontal alignment of the elements.
  • flex-start: to the left.
  • flex-end: to the right.
  • center: in the center.
  • space-between: evenly distributed with first element at the start and last element at the end.
  • space-around: evenly distributed with equal space around them.
  • space-evenly: spacing between any two elements (and the space to the edges) is equal.
• align-items: vertical alignment of the elements.
  • flex-start: at the top.
  • flex-end: at the bottom.
  • center: centered.
  • baseline: baseline of the elements are aligned.
  • stretch: stretch vertically to fill the container.
• align-content: vertical alignment when there are multiple rows.
  • flex-start: to the start of the container.
  • flex-end: to the end of the container.
  • center: to the center of the container.
  • space-between: evenly distributed.
  • space-around: evenly distributed with equal space around each line.
  • stretch (default): stretch to take up the remaining space.

Properties of the flex item

• order: change the order of the items.
• flex-grow: allows item to grow by setting a relative number.
• flex-shrink: allows item to shrink.
• flex-basis: default size of an item before the remaining space is distributed. Can be set in percentage, rem, etc. If it is set to auto it looks at the width and height property of the item.
• flex: combines flex-grow, flex-shrink and flex-basis. Default is 0 1 auto.
• align-self: vertically align an individual item.

Examples

Following the CSS-Tricks tutorial I created some examples using the flexbox class.

See the Pen Flexbox Examples by Miguel Tavares (@buzzmeekz) on CodePen.

Also check out this cool game where you have to move frogs around a screen to help you learn the flexbox basics.