— by Eva
Flexbox was created to offer a powerful and efficient layout system that helps handle alignment, distribution, and spacing within containers, especially when building responsive designs. Traditional layout methods like floats and inline blocks often required complex CSS to achieve even simple layouts, leading to inconsistent results across devices. Flexbox allows us to align items both horizontally and vertically, giving us control over how items grow, shrink, and adjust within their container.
One commonly used property in Flexbox is flex, which is a shorthand for three sub-properties: flex-grow, flex-shrink, and flex-basis. However, this shorthand is difficult to read and understand. For clarity, it’s recommended to avoid using the shorthand and instead set each property individually. These are the default values:
flex-grow: 0;items don’t grow to fill extra spaceflex-shrink: 1;items are allowed to shrink to prevent overflowflex-basis: auto;items use their max-width as the default basis