Understanding the flex layout

Understanding the
Flex Layout
By Barak Drechsler

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
device.
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
or flex-inline.
2. Flex Item, any child of a Flex container becomes, a flex item.
3. Axes:
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
line.
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.
The Basics

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
fit.
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 ))
Flex Calculation

Play Time - Flex
Flex Playground
Flex Calculator

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.
Browser Support

https://philipwalton.github.io/solved-by-flexbox/
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.
https://material.angularjs.org/latest/layout/introduction
Our day to day

Understanding the flex layout

More Related Content

Viewers also liked (11)

Similar to Understanding the flex layout (20)

More from Barak Drechsler (6)

Recently uploaded (20)

Understanding the flex layout

Editor's Notes