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

flex

Previousflex-grow-calculationNextalign-self

Last updated 4 years ago

Was this helpful?

flex

Sometimes, setting flex-grow, flex-shrink and flex-basis separately are tiring.

You can set all 3 with the flex shorthand. The added bonus of this way is you don't have to set all 3 value, you can skip the properties you're not interested in and just set the one you are. And for the ones you skipped, it will just take on the default value. 

.child {
  flex: 0 1 auto /* default */
     or <flex-grow> <flex-shrink> <flex-basis>
     or <flex-grow>
     or <flex-basis>
     or <flex-grow> <flex-basis>
     or <flex-grow> <flex-shrink>
}