I'm Tab Atkins

and I work at Google.

@tabatkins

xanthir.com/+

xanthir.com

xanthir.com/talks/2013-06-19

Use Flexbox Yesterday

The Old Spec

The New Spec

Flexbox's Concepts

Flexbox has 4 parts:

  1. Direction - flex-flow
  2. Alignment - justify-content, align-items, align-self, align-content
  3. Ordering - order
  4. Flexibility - flex

Alignment

Not good for all page layout

Fine for linear designs

Also okay for most sites with a simple header/footer/multi-column body

Bad for more complex, two-dimensional designs

Not good for all page layouts

logo header header
logo nav nav
news text pics
news footer footer

Not good for all page layouts

<vbox>
	<hbox>
		logo
		<vbox>
			header
			nav
		</vbox>
	</hbox>
	<hbox>
		news
		<vbox>
			<hbox>
				text
				pics
			</hbox>
			footer
		</vbox>
	</hbox>
</vbox>

Not good for all page layouts

logo header header
logo nav nav
news text pics
footer footer footer

Not good for all page layouts

<vbox>
	<hbox>
		logo
		<vbox>
			header
			nav
		</vbox>
	</hbox>
	<hbox>
		news
		text
		pics
	</hbox>
	footer
</vbox>

Grid makes it better

logo header header
logo nav nav
news text pics
news footer footer

Grid makes it better

body {
	display: grid;
	grid-template: "logo    header  header"
	               "logo    nav     nav"
	               "news    text    pics"
	               "news    footer  footer";
}

#logo   { grid-area: logo; }
#header { grid-area: header; }
#nav    { grid-area: nav; }
…

The End

Questions and Answers

@tabatkins

xanthir.com/+

xanthir.com

xanthir.com/talks/2013-06-19