understanding-flexbox

A guide to understanding flexbox in depth with practical examples

Visual Guide

Table of Contents

---

• Flexbox
• Breaking Down Flexbox Model
• Flex Container Properties
• Flex Item Properties
• Demos
  • navbar
  • mobile-content-order

Flexbox

• a recently new CSS standard that simplifies adding desired layouts to page content
• provides an efficient way to layout, align, and distributed spacing among elements in the DOM

Breaking Down Flexbox Model

• Flex Container: The parent container to which you set flexible display to.
• Flex Item(s): The child elements that are residing inside the parent flexible container.

Flex Container Properties

flex-direction

• controls the direction of flex container items
• flex-direction property values:
  • row
  • column
  • row-reverse
  • column-reverse

flex-wrap

• controls the flow of flex items and whether or not they should be forced into a single line or wrapped in multiple lines (despite the number of flex items)
• flex-wrap property values:
  • wrap
  • no-wrap
  • wrap-reverse

flex-flow

• a shortcut to using both flex-direction and flex-wrap values together(i.e., flex-flow: row wrap)
• flex-flow property values:
  • row nowrap
  • column wrap
  • column nowrap

justify-content

• a more enhanced version of text-align for all DOM elements to align elements in the main axis(horizontally)
• justify-content property values:
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

align-items

• a more enhanced version of text-align for all DOM elements to align elements in the cross axis(vertically)
• align-items property values:
  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

align-content

• controls how flex items are aligned in multi line flex containers
• align-content property values:
  • flex-start
  • flex-end
  • center
  • stretch

Flex Item Properties

order

• controls the order of flex items to be displayed
• default value is 0, but can take in both positive and negative integer values
• works similar to z-index, order of content goes from lowest order integer to highest
• order property values:
  • order: 0
  • order: -1
  • order: 1

flex-grow AND flex-shrink

• controls the amount of space a flex item can take in, squeeze in based on available space
• flex grow expands content to full extent of parent element horizontally
• flex shrink shrinks content to its default size if there is available space or if there is no space, it shrinks content to fit within parent element
• default value is 0, but it can also be any positive integer
• flex-grow and flex-shrink property values:
  • flex-shrink: 0
  • flex-shrink: 1
  • flex-grow: 0
  • flex-grow: 1

flex-basis

• specifies an initial size of flex items, but it can altered with flex-grow and flex-shrink
• default value is 'auto,' but it can also be any size attribute(px, em, % etc.)
• flex-basis property values:
  • flex-basis: auto
  • flex-basis: 50%
  • flex-basis: 100px

flex

• a shorthand for flex-shrink, flex-grow and flex-basis all together
• an simple example could be flex: 0 1 auto, 0 is flex-grow, 1 is flex-shrink, and auto is flex-basis
• flexproperty values:
  • flex: 0 1 150px

align-self

• helps to align specific flex items to align differently compared to its siblings
• align-self property values:
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
  • auto

auto-margin-alignment

• helps with auto margin behavior for flex items
  • default margin
  • margin-right: auto
  • margin-left: auto
  • margin-left: auto & margin-right: auto