Bo dinglesTM - -   Bright Lightbulb Graphic Ideas   - -

The Web Developer Bootcamp 2024

Colt Steele

Back to Class Page

Flexbox

Flexbox & Responsive Web Design Course PDF

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

Why flexbox?
CSS flexible box layout enables you to:
  • Center a block of content inside its parent.
  • Make all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
  • Make all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.

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.


Back to Top