StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is not going to help you much for IE, but I thought I'd share what we can do now in Gecko and WebKit browsers, and hopefully very soon in other browsers as well using CSS3 Flexible Box Layout Module. It's quite powerful. You could conceivably use this today with another technique of your choice as a fallback for other browsers.</p> <p>To see how it works, paste this into your text editor, save it, and run it in a recent version of Firefox, Chrome or Safari:</p> <pre><code><!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <style> ul { list-style: none; padding: 0; width: 500px; background: gray; } li { width: 500px; display: -moz-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; } li a { display: block; text-align: center; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; margin: 2px; background: silver; } </style> </head> <body> <ul> <li><a href="#">One</a></li> <li><a href="#">Two.one</a><a href="#">Two.two</a><a href="#">Two.three</a></li> <li><a href="#">Three.one</a><a href="#">Three.two</a></li> </ul> </body> </html> </code></pre> <p>The end result should look like this screenshot from FF3.6:</p> <p><img src="https://i.stack.imgur.com/oXHvw.jpg" alt="A list of anchors display width Flexbox"></p> <p>I wrote about this CSS3 module, nicknamed "Flexbox", at <a href="http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/" rel="nofollow noreferrer">http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/</a>. See also <a href="http://www.html5rocks.com/tutorials/flexbox/quick/" rel="nofollow noreferrer">http://www.html5rocks.com/tutorials/flexbox/quick/</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload