Created
September 6, 2011 18:09
-
-
Save stephenhay/1198464 to your computer and use it in GitHub Desktop.
Pearce's Flexbox Snaking Cell Dilemma
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Pearce's Flexbox Snaking Cell Dilemma</title> | |
| <style media="screen"> | |
| body { font: 100%/1.5 sans-serif; padding: 0 2em;} | |
| .block { | |
| background-color: silver; | |
| margin: 5px; | |
| padding: 5px; | |
| min-width: 90px; | |
| min-height: 90px; | |
| } | |
| .horz, .vert { | |
| display: -webkit-box; | |
| display: box; | |
| } | |
| .horz { | |
| -webkit-box-orient: horizontal; | |
| box-orient: horizontal; | |
| } | |
| .vert { | |
| -webkit-box-orient: vertical; | |
| box-orient: vertical; | |
| } | |
| #a { position: absolute; width: 200px; } | |
| #b { | |
| -webkit-box-flex: 2; | |
| box-flex: 2; | |
| } | |
| #b, #c { margin-top: 115px; } | |
| #expl { margin-left: 360px; float: right;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Pearce's Snaking Cell Dilemma</h1> | |
| <div id="expl"> | |
| <p>This can easily be done with a table (I know, <strong>avoid</strong>), but also by positioning and it will also be possible with CSS3 Grid or Template Layout. Can't see any way to do it with Flexbox, though, unless at least one of the “cells” is positioned. This is <em>just awful</em>, and is similarly inferior as tables for page layout. Tables are actually <em>easier</em>. The markup even looks like a table. Please read Tab Atkins‘ post on why <a href="http://www.xanthir.com/blog/b4580">the template approach is better than this</a>.</p> | |
| <p>Here, I'm using flexbox for the layout, and absolutely positioning cell “A”.</p> | |
| <p>This experiment is based on a discussion between James Pearce and I about his <a href="https://github.com/jamesgpearce/foxjs">fox.js</a>.</p> | |
| <p>Demo only works in webkit browsers.</p> | |
| </div> | |
| <div class="horz"> | |
| <div class="vert"> | |
| <div class="block" id="a">A</div> | |
| <div class="block" id="b">B</div> | |
| </div> | |
| <div class="vert"> | |
| <div class="horz"> | |
| <div class="block" id="c">C</div> | |
| <div class="block" id="d">D</div> | |
| </div> | |
| <div class="block">E</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment