Flexbox - introduction

Short layout history

Long time ago - no layout - top to bottom
Some time ago - tables
Today - CSS, divs, floats, positioning, lots of hacks

What is flexbox

"New" component layout system
One solution to solve all problems problems with block, inline, positioned, table layout systems
Separation of content and view

Short history

2007 - First ideas to move flexbox from XUL to CSS
23 July 2009 - First W3C working draft - First version
display: box
22 March 2011 - Tab Atkins takes over, complete rewrite - "Tweener" version (IE 10)
display: flexbox
12 June 2012 - Third version
display: flex
https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/

Browser support

Global - 95%
Norway - 97%
PostCSS - https://github.com/postcss/postcss
Autoprefixer - https://github.com/postcss/autoprefixer
Nuget - https://www.nuget.org/packages/BundleTransformer.Autoprefixer/

Basic usage

- block container with flex layout inside
- inline container with flex layout inside

Flex item

Flex container

Direction

Direction of main axis

flex-direction: row | row-reverse | column | column-reverse;

Flex item

Wrapping

Without wrapping rule, all flex items are in one row.

Flex item

Wrapping 2

Wrapping in main axis

flex-wrap: nowrap | wrap | wrap-reverse;

Flex item

Direction + wrapping = flex-flow

Wrapping in main axis

flex-flow: <'flex-direction'> || <'flex-wrap'>;

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Justify

Alignment in main axis

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start

Flex item

flex-end

Flex item

center

Flex item

space-between

Flex item

space-around

Flex item

Justify with column direction

Alignment in main axis

justify-content: flex-start | flex-end | center | space-between | space-around;

Flex item

Vertical alignment

Vertical alignment in main axis

align-items: flex-start | flex-end | center | baseline | stretch;

Flex item

Vertical alignment of items

Every item can be aligned separately

align-self: flex-start | flex-end | center | baseline | stretch;

Flex item

Order

Items can be ordered to show them differently on various devices

Flex item 1

Flex item 2

Flex item 3

Automatic resizing - flex-grow

Used to fill available space

flex-grow: <number>; /* default 0 */

Without flex-grow

Flex item

With flex-grow

Flex item

Automatic resizing - flex-shrink

Used to shrink items if there is not enough space

flex-shrink: <number>; /* default 0 */

Without flex-shrink

Flex item A B C D E F G H I J

Flex item

Flex item A B C D E F G H I J

Without flex-shrink

Flex item A B C D E F G H I J

Flex item

Flex item A B C D E F G H I J

Automatic resizing - flex-basis

Base size of item before calculating shrink or grow

flex-basis: <length> | auto; /* default auto */

With flex-basis: 0px;

Flex item

Without flex-basis: 0px;

Flex item

Automatic resizing - flex

Short version to define resizing

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Flex item

Recipe - centering

<div style="display: flex; height: 300px; width: 400px; align-items: center;"> <div>Vertically centered div</div> </div> <div style="display: flex; height: 300px; width: 400px; justify-content: center; align-items: flex-start;"> <div>Horizontally centered div</div> </div>

Vertically centered div

Horizontally centered div

Recipe - centering

Vertical centering finally possible, no distinction between inline and block items

<div style="display: flex; height: 100px; width: 400px; justify-content: center; align-items: center;"> <div>Perfectly centered div</div> </div> <div style="display: flex; height: 100px; width: 400px; justify-content: center; align-items: center;"> <span>Perfectly centered span</span> <span>Other span</span> </div>

Perfectly centered div

Perfectly centered span Other span

Recipe - float:left, float:right

no magic with floats, clearfixes and paddings

<div style="display: flex; justify-content: space-between;"> <div style="display: flex; align-items: center;"> <button>Button A</button> <button style="font-size: 20px;">Button B</button> </div> <div style="display: flex; align-items: center;"> <button>Button C</button> </div> </div>

Recipe - input + button

<div style="display: flex; width: 700px;"> <input type="text" style="flex: 1"></input> <button>Search</button> </div>

Recipe - Holy Grail layout

<body> <header>HEADER</header> <div id="main"> <article id="main-content"></article> <nav id="menu">MENU</nav> <aside id="ads">ADS</aside> </div> <footer>FOOTER</footer> </body> body { margin: 0px; padding: 0px; display: flex; height: 100vh; flex-flow: column; } #main { display: flex; flex: 1 0 auto; } #main-content { flex: 1; overflow-y: scroll; } #menu { width: 200px; } #ads { width: 100px; } header, footer { flex: none; }

Flexbox defense

Is flexbox solution to all problems?

No! Grid system is next. display: grid .container{ grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100% [third-line] auto [last-line]; }

Materials:

http://spaceninja.com/2015/08/24/what-is-flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://jonibologna.com/flexbox-cheatsheet/
https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/
http://caniuse.com/#feat=flexbox
http://flexboxdefense.com/