Understanding the Flex Layout

By Barak Drechsler

Flex Box Model

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.

c. The align-items property defines the default for how flex items are laid out along the cross axis on the current line.

d. The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.

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;

b. Two values grow & shrink : flex 1 1;

c. Three Values grow & shrink & basis flex: 1 1 10%;

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 ))

5. Shrink: basis size + ( (shrink factor * basis) / (sum of bases * factors ) ) * remaining space

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

Questions?