3D Canvas with WebGL^1
Creates 3D objects on the canvas. [C8, F4, S5.1, O12]We’ll start by looking at a much better way to define layouts with CSS.
11.1 Defining Layouts with the Flexible Box Model
One of the most difficult parts of using CSS for layouts is learning how to
wrangle “floats and clears,” two CSS properties that make it possible to get
those web layouts we’re all so used to seeing, without resorting to tables.But really, we’re abusing floats and clears, and we need a better way. That’s
the promise of the Flexible Box model,^2 and although it’s not quite ready, it
will be soon. With this new model, designing complex layouts that work on
all devices is much, much easier.Let’s use the Flexible Box model to make the standard “sidebar on the left,
content on the right” layout we’ve seen thousands of times. We’ll start with
basic markup in an HTML page:where_next/flexbox/index.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Home</title>
<linkrel="stylesheet"href="stylesheets/style.css" />
</head>
<body>
<header>
<h1>AwesomeCo</h1>
</header><divclass="container"><sectionid="main">
<h1>SomeStory</h1><p>
Loremipsumdolorsit amet,consecteturadipisicingelit,sed do
eiusmodtemporincididuntut laboreet doloremagnaaliqua.Ut
enimad minimveniam,quisnostrudexercitationullamcolaboris
nisiut aliquipex ea commodoconsequat.
</p>- This may be disabled by default or require the most recent video drivers to work
properly. - http://www.w3.org/TR/css3-flexbox/
Chapter 11. Where to Go Next • 240
Download from Wow! eBook <www.wowebook.com> report erratum • discuss