[Cheat Sheet] CSS Flex-Box

Note: This is a cheat sheet. It’s sums up all the relevant information I collected on this topic. It can serve as your starting point of learning or relearning Flex Box.  Follow the links bellow for more detailed explanations.

  • new layout mode in CSS3 for complex layouts
  • consists of one flex container and flex items 
  • specify how the flex items are aligned inside the flex container
  • by default, flex items are displayed in the flex container along a flex line
  • by default, there is only one flex line (left->right, top->bottom)

  •  you can change the Writing Mode from default to a right-to-left flow (for supporting different languages) by setting direction : rtl; – the direction of the text will also be right to left
  • the terminology is so abstract for flex because it doesn’t take into consideration the language of the page (the direction set)  – this is why terms like ‘right’, ‘left’, ‘top’, ‘bottom’ are avoided. (this is the main reason of confusion when trying to understand flex)

The main axis and the cross axis

  • to abstract over the writing-mode, Flexbox uses the concepts of the Main Axis and the Cross Axis. Flex Lines follow the Main Axis. The Cross Axis is perpendicular to the Main Axis.
The names for the starting points, ending points, and directions of each axis are as follows:
  • Main Start
  • Main End
  • Main Direction (sometimes called the Flow Direction)
  • Cross Start
  • Cross End
  • Cross Direction

Properties of the Flex Container

  • flex-direction
    • allows the changing of the axes of the container
    • default value is row – flex items are laid out in the direction of the writing mode
    • other possible values:
      • row-reverse – swap main start and main end (If the writing-mode is left to right, Flex Items are now laid out right to left.)
      • column – swap main axes with cross axis  (If the writing system is horizontal, the Flex Items are now laid out vertically.)
      • column-reverse – same as column, but reversed  (swap between cross start and cross end)
  • justify-content
    • adjust the positions of Flex Items on the Main Axis 
    • possible values:
      • flex-start (default)
      • flex-end
      • center
      • space-between
      • space-around

  • align-items
    • complementary to justify-content
    • adjusts the way flex items are positioned on the Cross Axis
    • possible values:
      • flex-start
      • flex-end
      • center
      • space-between
      • space-around

  • flex-wrap
    • if set to wrap: 
      • flex items are wrap into additional Flex Lines if there is not enough room for them on one Flex Line
      • additional flex lines are added in the direction of the cross axis (if needed)
    • other values:
      • nowrap – default
      • wrap-reverse – same as wrap except new Flex Lines will be added in the opposite direction on the Cross Axis
  • align-content
    • modifies the behavior of flex-wrap
    • similar to align-items, but instead of aligning flex items, it aligns flex lines
    • possible values: stretch (default), flex-start, flex-end, center, space-between, space-around
  • flex-flow 
    • shorthand for flex-direction and flex-wrap
    • example: flex-flow: [flex-direction] [flex-wrap]
       -webkit-flex-flow:column nowrap;
        flex-flow:column nowrap;

Flex Items

  • text in flex container also gets treated as a flex item
  • the content of Flex Items render as normal (ex. setting float on a flex item does nothing but you can have a floated element inside of a flex item
  • main size and cross size – equivalent of height and width

Properties of Flex Items

  •  order – adjust order when rendered (commonly used scenario: setting -1 in order to put the item first)
  • margin – set to auto will absorb remaining space (margin: auto; – center object inside the container)
  • align-self
    • overrides the flex container’s align-items property for that items
    • can have the same values as align-items
  • flex – specify how a flex item will be prioritized when free space is being distributed on the Main Axis
    •  flex: [number] – ratio of free space that should be taken from the total (total is the sum of flex values of all other flex items)
    •  flex: initial – flex item will be inflexible when there is free space but can shrink smaller if needed
    •  flex: none – flex item will not be flexible
  • visibility
    •  (!not implemented everywhere – better ignore it for now) – when set to collapse, element will affect the cross size of flex container but will not be displayed nor it will consume any space on the main axis
    • effects that depend on a box appearing in the formatting structure (like incrementing counters or running animations and transitions) still operate on collapsed items.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s