Use Flexbox Yesterday

• Learn you a Flexbox
• Work through examples
• Q&A

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

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

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

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

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