Flow control in flexbox

.flex-container {
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: no-wrap | wrap | wrap-reverse;
}

.flex-container {
  flex-flow: row wrap;
}

flex-direction

.flex-container {
  flex-direction: row;
}

.flex-container {
  flex-direction: row-reverse;
}

.flex-container {
  flex-direction: column;
}

.flex-container {
  flex-direction: column-reverse;
}

flex-wrap

.flex-container {
  flex-direction: row;
  flex-wrap: nowrap;
}

.flex-container {
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

.flex-container {
  flex-direction: column;
  flex-wrap: wrap;
}

.flex-container {
  flex-direction: row;
  flex-wrap: wrap;
}

Video tutorial

1 - The basics

2 - Grow and shrink elements

3 - Odds and ends

Lab

Layouts for large and small screens

Instructions

• Build this layout with as few elements as possible
• Choose a suitable break point for the small screen layout
• No height properties are to be used (use only the flexbox model)
• The layout should cover at least the height of the browser viewport

Lab resources

http://jayway.github.io/flexbox-course/flexbox-lab.zip

A few good links

• Mozilla Developer Network http://mzl.la/1aNwsHP
• Flexy Boxes (flexbox sandbox) http://bit.ly/1gRJ1Hv