📁
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?

Display

PreviousParent PropertyNextBlock & Inline properties

Last updated 4 years ago

Was this helpful?

Display

To start this Flexbox party, we need to first create our flex container. This is done by applying flex to the display property on the parent element. Bam! Now all its immediate children will become flex items 🎊

There are 2 types of flex container: flex will create a block level flex container, and inline-flex will create an inline level flex container. More on block and inline in the next post 😉

.parent {
  display: flex /* default */
        or inline-flex
}