Use Flexbox Yesterday
Use Flexbox Yesterday
- Learn you a Flexbox
- Work through examples
- Q&A
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
<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
<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; }
…