SEXI FLEXI

Overview of the flex layout box model

by Michał Skowronek

Contents

1. What is flex basic concepts
2. Common values for the win
3. Resolved by flex layout examples
4. Caveats how to avoid flex traps
5. Performance browser ❤️ flex
6. Animations could be really slow and hard
7. Tips and trick tricks and tips

What is flex

1. Block layout for documents
2. Inline layout for text
3. Table layout for tabular data
4. Positioned layout for explicit positioning
5. Flex layout for applications and webpages

What is flex

Powerful tool for distributing space and aligning content in ways that web apps and complex web pages often need.

Basic concepts

1. Lay out items container level
2. Expand/shrink items item level

Basic concepts

container

flex-direction

justify-content

align-items

wrap

align-content

item

flex-grow

flex-shrink

flex-basis

align-self

order

flex

Common values

flex: initial;
flex: none;
flex: auto;
flex: <positive-number>;

flex: <grow> <shrink> <basis>;

flex: 0 1 auto;
flex: 0 0 auto;
flex: 1 1 auto;
flex: <positive-number> 1 0;

Example 1

Horizontal and vertical centering

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

body

figure

Example 2

Sticky footer

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: none;
}

footer {
  flex: none;
}

main {
  flex: auto;
}

header

body

footer

main

Example 3

Media object

.media

figure

main

.media {
  display: flex;
  align-items: flex-start;
}

figure {
  margin-right: 1em;
}

main {
  flex: 1;
}

Example 4

Scoreboards

body {
  display: flex;
  flex-direction: row;
}

.item-1, .item-3 {
  flex: 1;
}

.item-2 {
  flex: 2;
}

body

1

3

2

Example 5

Content grouping (floating behaviour)

body {
  display: flex;
  flex-direction: row;
}

.item-1 {
  margin-right: auto;
}

body

1

3

2

Example 6

Content grouping (floating behaviour)

body {
  display: flex;
  flex-direction: row;
}

.item-2 {
  margin-left: auto;
}

body

1

3

2

Example 7

Content grouping (floating behaviour)

body {
  display: flex;
  flex-direction: row;
}

.item-1 {
  margin-right: auto;
}

.item-3 {
  margin-left: auto;
}

body

1

3

2

Caveats

1. Ignore min-height of parent IE 10-11
2. Fail to honor minimum content sizing Chrome, Opera, Safari
3. Unitless flex-basis IE 10-11
4. Remember about overflow of container All

Performance

Tips and tricks

body

figure

Tips and tricks

body

figure

1

2

Tips and tricks

body

center

left

item

item

right

item

Thank You

Michał Skowronek

@coderitual

References:

W3C CSS Flexible Box Layout Module Level 1 (draft)

Solved by flexbox

Flex bugs