A module of CSS that defines a CSS box model optimized for user interface design. In the flex
layout model, the children of a flex container can be laid out in any direction, and can “flex” their
sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.
Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of
these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts
in two dimensions.
CSS Flexible Box Layout
1.ability to alter its items' width and/or height to best fit in the available space on any display
2.flexbox layout algorithm is direction-agnostic as opposed to the block layout, which is
vertically-biased, or the inline layout, which is horizontally-biased
3.Flexbox layout is most appropriate for the components of an application, and small-scale
layouts, while the (emerging) Grid layout is intended for larger scale layouts.
Flex Layout agenda
1. Flex Container, the parent element, that defines the flex behaviour, defined by display: flex
2. Flex Item, any child of a Flex container becomes, a flex item.
a. The flex-direction property establishes the main axis.
b. The justify-content property defines how flex items are laid out along the main axis on the current
The Basics (MDN)
4. order , allows to adjust flex items order.
5.Flex-wrap, flex can be defined either single line or multiline.
6. The flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish
the flexibility of the flex items.
1. The flex-basis specifies initial main size of a flex item. (the size to be defined before any
other factors apply).
2. The flex-grow - specifies the grow factor of each element, if any space remaining.
3. The flex-shrink - specifies the shrink factor, if there isn’t enough space for all elements to
4. You should use the flex shorthand as best practice.
a. One value - flex-grow flex: 1;
Flex-basis, flex-grow & flex-shrink
At first the browser calculate each item size, then it check the amount of remaining space.
If extra space available each item will receive its flex grow portion, if there isn’t enough space
each item will shrink by its flex shrink portion.
1. Calculate the Remaining Space: Container main size - ( sum of size of flex items baisias)
2. If Remaining Space is positive, apply growth factor.
3. If it negative apply shrink factor.
4. Growth: basis size + (remaining space * (flex-grow/ total flexs ))
Play Time - Flex
Flex have a wide browser support in newer browsers
Although it not perfect: see Github Known Flex Bugs - most are IE 10-11 related, but not only.
Dynamic Height Overflows
Solved By Flex
1. In firefox or old chromes, in order for overflow auto to work each flex item must have min-
height 0, or min-width: 0 (depends on scrolling direction)
2. Because of some issues with Safari, do not use height 100% of flex: 1 items, keep nesting
flex: 1 if needed.
Browser Compatibility Gotchas
1. We use angular material design, use its grid system.
Our day to day