flexbox is well supported

  • block elements
  • always on top of eachother
  • flexbox can change that
  • give parent the dislay property of flex
  • children block elements can be flexed around
  • either row or column
  • flex-direction: row
  • flex-direction: column
  • flex only goes one row deep
  • can make a grid by subdividing flexboxes
  • variety of ways to organize
  • good for centering


  • centering
  • from display: flex elemetn
  • justify-content: center
  • align-items: center


<.flexbox-container display: flex>

><.flexbox-item flexbox-item .flexbox-item flexbox-item-1>

><.flexbox-item flexbox-item .flexbox-item flexbox-item-2>

><.flexbox-item flexbox-item .flexbox-item flexbox-item-3>

display: flex


  • container is used for laying out spacing between items and positioning of items within container
  • flex item properties are meant to override the container properties or to apply different fleble sizing to the elements
  • main axis is horizontal when flex-direction set to row
  • cross axis is vertial
  • vice versa for column layout
  • use jusitfy-content to align contents across main axis
  • flex-start sets it to start of main axis
  • center will center length of main axis
  • space between puts space evenly between flex items
  • space around is like space between but also includes all sides of the flex items across the main axis
  • use align-items to align contents across cross axis
  • default is stretch, which means they will grow as much as they can within the container's cross axis
  • flex-start will set it to the start of the main axis
  • center will do what its supposed to
  • otherwise very difficult to do with css
  • align-content is used only to align content across cross axis when you want multi-line containers
  • flex-wrap:wrap in container will allow it to wrap
  • very similar in use to justify-content


flex item properties are meant to override the container properties or to apply different fleble sizing to the elements

  • flex-shrink: 0 will prevent items from shrinking at all
  • flex-grow: 1 will have an item grow to take up all extra space
  • multiple flex-grow:1 items will split the extra space evenly between them all
  • flex-grow:2 items would get twice the amount of extra space as flex-grow:1 items
  • flex-basis: 0 will have flexbox imagine that the item item's width is 0px before adding extra space
  • align-self property allows you to override the cross-axis alignment of an item
  • align-self: center vs align-items: stretch, for example
  • order allows you to change the order of flex-items
  • order: 1
  • order: 3
  • advised to not use because screen readers won't keep up

  • summary
  • have a container wraps flex items
  • set it to flex
  • justify-content
  • align-items
  • flex-direction
  • have items
  • flex-shrink
  • flex-grow
  • flex-basis
  • shorthand is flex
  • flex: {grow} {shrink} {basis}

Last Updated:

Summarize & share videos seamlessly