Flexbox cheat sheet

Enabling

  • display: flex

    • Turns a parent element into a flex container-all child elements will become part of the flex flow.

    • Forces the parent element into a display: block-like state where it takes up an entire row.

    • .dinos {
        display: flex;
      }
      
    • Affects all the child elements inside this parent container element.

  • display: inline-flex

    • Same as flex but allows the parent element to be display: inline-block

    • .dinos {
        display: inline-flex;
      }
      
    • Affects all the child elements inside this parent container element.

  • Affects child elements

    • The flexbox code is triggered on the parent element, but affects all of the child elements.

Orientation

  • flex-direction

    • row, row-reverse, column, column-reverse

    • Choose the direction of the flexbox children, horizontally (row) or vertically (column).

    • The *-reverse options will reorder the children in the opposite order they’re written in HTML.

    • row is the default.

    • .dinos {
        flex-direction: row;
      }
      
  • flex-wrap

    • wrap , nowrap

    • Whether to allow the child elements to wrap to another line or force them all on a single line.

    • nowrap is the default.

    • .dinos {
        flex-wrap: nowrap;
      }
      
  • order

    • Reorder a single child element within the flex flow. Negative numbers allowed.

    • .tricera {
        /* Move an element to the start */
        order: -1;
      }
      .bronto {
        /* Move an element to the end */
        order: 1000;
      }
      

Alignment

  • justify-content

    • flex-start, flex-end, center, space-around, space-between

    • Control how the elements are spaced within their parent flex container.

    • .dinos {
        /* Move all elements to the center */
        justify-content: center;
      }
      .dinos {
        /* Make elements touch the edge and space evenly between */
        justify-content: space-between;
      }
      
  • align-items

    • flex-start, flex-end, center, stretch

    • Control how elements are aligned in the opposite direction of their justification.

    • .dinos {
        /* Force all elements to be the same height */
        flex-direction: row;
        align-items: stretch;
      }
      
    • align-self — is a similar property, but allows you to target a single child element, instead of all of the children.

    • .bronto {
        /* Force .bronto to be at the bottom */
        flex-direction: row;
        align-self: flex-end;
      }
      
  • align-content

    • flex-start, flex-end, center, space-around, space-between, stretch

    • How to align the grouping of wrapped flex children—only works with flex-wrap: wrap

    • .dinos {
        /* Spread the wrapped children to fill their parent */
        align-content: space-between;
      }
      

Flexibility

  • flex-basis

    • Similar to width and height but will become the the size of the element cannot be determined, it will instead become the size of the content.

    • .stego {
        /* Same size as the content */
        flex-basis: content;
      }
      .bronto {
        /* 45% the width of the parent */
        flex-basis: 45%;
      }
      
  • flex-grow

    • A unitless number that defines how much of the leftover space this element should be allotted.

    • Chunks the leftover space and allots based on this multiplier.

    • Without flex-grow all elements will be allotted the same amount of space.

    • .bronto {
        /* Gets 1 piece of the space */
        flex-grow: 1;
      }
      .stego {
        /* Gets 2 pieces of the space */
        flex-grow: 2;
      }
      
  • flex-shrink

    • Opposite to flex-grow: defines how much space it can shrink.

    • If there isn’t enough space available the element will remove allotments against this multiplier.

    • .tricera {
        flex-shrink: 2;
      }