Let's talk about

Flexbox

History of Layouts

 

1995

1995

1996

Tables

Framesets

Floats

1998

Positioning

2004

Inline-Block

2007

Media Queries

2012

Flexbox

2016

Grid

Browser Support

The Flexmodel

Cross Axis

Main Axis

Start

End

Start

End

1

2

3

Think about the possibilities

1

2

3

Think about the possibilities

1

2

3

Think about the possibilities

1

2

3

Think about the possibilities

1

2

3

Think about the possibilities

1

CSS PROPERTIES

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.item {
    width: 20%;
    height: 20%;
}

CSS PROPERTIES

.container {
    // requirement
    display: flex;
    
    // flow control
    flex-wrap: nowrap | wrap | wrap-reverse;
    flex-direction: row | column;
    
    // item orientation on axis
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: flex-start | flex-end | center | baseline | stretch;

    // orientation for wrapped items
    align-content: flex-start | flex-end | center | space-between | space-around;
}
.item {
    flex: 1 1 20%;
    align-self: flex-start | flex-end | center | baseline | stretch;
    order: 1;
}

The Flexmodel

Cross Axis

Main Axis

Start

End

Start

End

1

2

3

DEMO
TIME

Pros

  • (almost) any layout
  • few properties/keywords
  • Easy responsive design
  • Grid-systems
  • Re-ordering elements
  • No hacks!
  • RTL/Column flow
  • Fast changes

Cons

  • Wrapper
  • Autoprefixing
  • Browser Support
  • Some IE 10/11 quirks
  • Flexmodel to grasp

Thank you

 Questions?