An Intro to FlexboxAnd Post-Modern CSS Layout

Wait… Post Modern?

2015+

2012

1990

Post-Modern EraAs more CSS3 modules are adopted, Web layout is finally reaching the peak of where we can go with art direction and the web with things such as Transforms, Flexbox, Grid Layout, Web animations and more

The Modern EraWith full adoption of CSS2.1 and the beginnings of implementation of CSS3 modules, Web design experienced the first push into truly great design. Many elements from the Classical Era were lost in The Middle Ages leading to the rise of the front-end framework...

The Middle AgesThe advent of CSS1 and CSS2 sparked amazing advancements in web layout, but also made things incredibly inconsistent, hard to work with and often quite buggy.

Classical EraIn the early 90s, Tim Berners-Lee developed the first Web browser and Web server and the languages and protocols necessary to show content.

Pre-HistoryThe Advent of modems and the rise of bulletin board systems made way for what we know today as the internet.

94-2007

1980s

Eras of Web Layout

A VERY Brief History of CSS

A VERY Brief History of CSS

1994: CSS1 Spec starts 1996: CSS1 Spec complete (IE3 kinda adopts) 1998: CSS2 Spec published 2000: IE5 reaches 99% CSS1 adoption 2000-07: CSS2/2.1 turmoil and back and forth 2011: CSS2.1 Finally finished and published

A VERY Brief History of CSS

As a result, developers have always thought…

A VERY Brief History of CSS

A VERY Brief History of CSS

The Rise of the Frameworks

A VERY Brief History of CSS

The Rise of the Frameworks

Sour

ce: h

ttps:

//web

flow.

com

/blo

g/ex

ampl

es-o

f-uni

que-

web

site

-layo

uts

A VERY Brief History of CSS

CSS3 Did Things Differently And here’s what we get

A VERY Brief History of CSS

Flexible Box Layoutor Flexbox or Flex

Layout the old (2.1) way<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3 </div></div><style.scss>.stripe { background-color: #ccc; width: 100%;}.container { width: 990px; margin: 0 auto;}// .container::after {// content: " ";// clear: both;// }.item { width: 330px; float: left; //break it with padding! and border!! //padding: 20px; //border: 1px solid}

<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3 </div></div>

<style.scss>.stripe { background-color: #ccc; width: 100%;}.container { width: 990px; margin: 0 auto;}.container::after { content: " "; clear: both;}.item { width: 330px; float: left; //break it with padding! and border!! //padding: 20px; //border: 1px solid}

Layout the old (2.1) way

<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3 </div></div>

<style.scss>.stripe { background-color: #ccc; width: 100%;}.container { width: 990px; margin: 0 auto;}.container::after { content: " "; clear: both;}.item { width: 330px; float: left; //break it with padding! and border!! padding: 20px; border: 1px solid;}

Layout the old (2.1) way

Simple Flex Layout<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3 </div></div>

<style.scss>.stripe { background-color: #ccc; width: 100%;}.container { max-width: 990px; margin: 0 auto; display: flex;}.item { flex: 1; padding: 10px; }

Simple Flex Layout<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3</div>

<style.scss>...

.item { flex: 1; padding: 10px 50px;}

Simple Flex Layout<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 5</div>

<style.scss>...

.item { flex: 1; padding: 10px 50px;}

Simple Flex Layout<div class="flex-parent"> <div class="flex-item flex1"> <p>...</p> </div> TIMES 3</div>

<style.scss>.flex-parent { display: flex;}.flex-item { flex: 1;}.flex3 { flex: 4;}

Other Flex examples: http://codepen.io/brob/pen/eZGXKm

index.html<div class="container"> <div class="center"> <h1>Hello there!</h1> </div></div>

style.css.container { height: 100vh; position: relative;}.center { position: absolute; height: 100px; width: 50px;

margin: auto; top: 0; bottom: 0; left: 0; right: 0;}

Vertical Centering (old)

index.html<div class="container"> <div class="center"> <h1>Hello there!</h1> </div></div>

new-style.css.container { height: 100vh; display: flex;}.center { margin: auto;}

Vertical Centering (flex)

Even the “holy grail”

Even the “holy grail”<div class="container">

<div class="header"><h1>A beautiful "Holy Grail" site</h1></div>

<div class="body">

<div class="left-column column"> CONTENT </div>

<div class="middle-column column"> CONTENT </div>

<div class="right-column column"> CONTENT </div>

<div class="footer"> &copy; Some copyright info

</div>

</div>

Main CSS.body { display: flex; align-items: baseline;}

.column { margin: 0 10px;}.left-column, .right-column { width: 200px; }.middle-column { flex: 1;}

Extraneous CSSimg { max-width: 100%;}.container { margin: 0;}.header { background: blue; color: white; padding: 20px;}

.footer { background-color: #000; color: #e1e1e1; padding: 10px 0; text-align: center;}

Can I Use Flex?

http://caniuse.com/#feat=flexbox

Other Resources

• CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• Github repo of bugs and fixeshttp://www.flexbugs.com

• My Collection of Layout examples (ever Growing)http://codepen.io/collection/XvORkb/

• Jen Simmons’ inspirational layout talkhttps://vimeo.com/147950924

Other Layout Concepts to Research

• Viewport Units (vh, vw)

• CSS Transforms

• CSS Shapes

• CSS Multicolumn layout

• CSS gradients

Questions?Twitter: @brob, @memphisww

#memtech Slack: slack.memphistechnology.org