📁
FlexBox
  • Introduction
  • Flex Container & Flex Items
  • Immediate Child
  • Flexbox Axes
  • The FlexBox Model
  • Parent Property
  • Display
  • Block & Inline properties
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content [row]
  • justify-content [column]
  • align-items[row]
  • align-items [column]
  • align-content
  • Child Properties
  • order
  • flex-grow
  • flex-shrink
  • flex-basis vs width
  • flex-grow-calculation
  • flex
  • align-self
  • margins
Powered by GitBook
On this page

Was this helpful?

The FlexBox Model

PreviousFlexbox AxesNextParent Property

Last updated 4 years ago

Was this helpful?

Flexbox Module

Let's zoom in on one of the layouts and check out the anatomy of our Flexbox. On each axis, there is a start and an end. If it's on the main axis, the starting position is called main start and if the ending position is called main end. The same concept applies to the cross axis. Knowing your start and end is important because you can control where your flex items are placed.

Flexbox Fundamentals