• The flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
  • Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
  • Replaces float and positioning in most cases

Concepts

  • main axis: The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property
  • main size: A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
  • main-start and main-end: The flex items are placed within the container starting from main-start and going to main-end.
  • Similar properties for “cross” instead of “main”

Properties for the Parent (flex container)

  • display: This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children,i.e., display: flex;
  • flex-direction: This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Default: row
  • flex-wrap: By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
    • nowrap (default): all flex items will be on one line
    • wrap: flex items will wrap onto multiple lines, from top to bottom.
  • justify-content
    • flex-start (default): items are packed toward the start of the flex-direction
    • left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
    • start: items are packed toward the start of the writing-mode direction.
    • center: items are centered along the line
    • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
    • space-around:
    • space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
  • align-items: This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
  • align-content: This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Properties for the Children (flex items)

  • flex-shrink: by default will allow item to shrink when the container is nowrap and cannot fit items on a single line
  • flex-basis: auto — in this case the browser looks to see if the items have a size. If the items don’t have a size then the content’s size is used as the flex-basis
  • flex-grow: flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.
  • flex: This is the shorthand for flex-grow, flex-shrink and flex-basis combined. Most common format you will see
    • Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.
    • Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.
    • Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.