CSS Layout
The history of CSS Layout on the web is largely web developers using tools for layout which were not intended for layout.
CSS Layout
progressive enhancement flexbox
flexbox can be used with both inline-block or float based layouts to progressively enhance your layout.
All these examples use inline-block.
Holy grail layout - Progressively enhanced equal heights
With a little bit of flexbox the heights on this grid can be equalised.
Product grid - Progressively enhanced equal heights
With a little bit of flexbox the heights on this grid can be equalised.
meow vol iii
meow vol iii
meow vol iii
meow vol iii
meow vol iii
meow vol iii
Justified content
This menu works well on its own just using inline-block.
Add in some flexbox to progressively enhance it into a justified menu.
Vertically aligned content
Sometimes you might wanted vertically align items. But it's not crucial. Progressively enhance by adding flexbox.
Regular old' text
Vertically centered text!
Multi dimensional layout
It's pretty straight forward to do complex column spanning with inline-block or float based layouts.
But!
On it's own using inline-block or floats are not really able to layout grid items out on a row (row spanning).
header
CSS Layout
article
Article heading
The introduction of flexboox and CSS Grids gives developers great tools to laying out web pages.
You can add flexbox and use it's flex-direction property to layout items over a row (row spanning)
header
CSS Layout
article
Article heading
The introduction of flexboox and CSS Grids gives developers great tools for laying out web pages.