The Web Developer Bootcamp 2024

Colt Steele

Back to Class Page

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items will expand to fill additional space, or shrink to fit into smaller spaces making it a flexible way of displaying content.

W3Schools | CSS Flexbox and Its Properties MDN | Flexbox Geeks4Geeks | CSS Flexbox and Its Properties CSS Flexbox Layout Guide

Flexbox consists of a parent container that is designated as a flex container, and the child elements that become the flex items.

Flex also works off of the premise of a MAIN and CROSS axis. These are determined by the flex designation, row or column, with row being the default.

• flex-direction: row; - gives you a left to right horizontal main axis and a vertical cross axis.
  • *note: this is the default axis setup for flex, so if you want a left to right main axis with a vertical cross axis, you can omit this statement.
• flex-direction: row-reverse; - gives you a right to left horizontal main axis and a vertical cross axis
• flex-direction: column; - gives you a top to bottom vertical main axis and a horizontal cross axis
• flex-direction: column-reverse; - gives you a bottom to top vertical main axis and a horizontal cross axis

Once you have designated a container as a flex container, AND determined which are the main and cross axises, you can then use flex properties to effect the layout of the content, within the flex container. Below is a partial list of some of these properties. Consult the documentation for more information.

Parent Properties:

• display: Defines a parent container as a flex container.
• flex-direction : Defines the main axis direction.
  • row | row-reverse | column | column-reverse
• flex-wrap : allows child items to wrap onto multiple lines.
  • wrap | nowrap | wrap-reverse
• flex-flow : shorthand for flex-direction and flex-wrap.
  • row wrap | row-reverse nowrap | column wrap-reverse | column wrap
• justify-content : aligns child items along the main axis.
  • start | center | end | flex-start | flex-end | space-between | space-around | space-evenly | stretch
• align-content : aligns child items along the cross axis.
  • same as justify-content plus baseline | first baseline | last baseline | and others
• align-items : aligns multiple lines of child items on the cross axis.
  • Too many to list - consult the documentation

Children/Flex-items Properties:

• order : changes the order of items without altering the source order.
• flex-grow : allows an item to grow to fill available space.
• flex-shrink : allows an item to shrink if there’s insufficient space.
• flex-basis : defines the initial size of an item.
• flex : shorthand for flex-grow , flex-shrink , and flex-basis.
• align-self : aligns a single item within the flex container.