This section is for documenting several flexbox usecases, and their solutions.
<html><table><tr><td></html>
<html></td><td></html>
requires a spacer element
<html></td></tr><tr><td></html>
<toolbar>
<tool>
<icon>
<label>foo</label>
</tool>
<tool>
<icon>
<label>foo</label>
</tool>
...
</toolbar>
<style>
toolbar {
display: flex;
flex-direction: lr;
padding: 3px;
}
tool {
margin: 0 1fl;
}
</style>
<html></td><td></html>
<toolbar>
<tool>
<icon>
<label>foo</label>
</tool>
<spacer></spacer>
<tool>
<icon>
<label>foo</label>
</tool>
...
</toolbar>
<style>
toolbar {
display: box;
box-orient: horizontal;
padding: 3px;
}
spacer {
box-flex: 1;
}
</style>
<html></td></tr></table></html>
<toolbar>
<toolgroup>
<tool>
<icon>
<label>foo</label>
</tool>
...
</toolgroup>
<toolgroup>
<tool>
<icon>
<label>foo</label>
</tool>
...
</toolgroup>
...
</toolbar>
<style>
toolbar {
display: flex;
flex-direction: lr;
padding: 3px;
flex-pack: justify;
}
toolgroup {
display: flex;
flex-direction: lr;
}
</style>
Or:
<toolbar>
<tool class=groupstart>
<icon>
<label>foo</label>
</tool>
<tool class=groupend>
<icon>
<label>foo</label>
</tool>
<tool class=groupstart>
<icon>
<label>foo</label>
</tool>
...
</toolbar>
<style>
toolbar {
display: flex;
flex-direction: lr;
padding: 3px;
}
tool.groupstart:not(:first-child) {
margin-left: 1fl;
}
tool.groupend:not(:last-child) {
margin-right: 1fl;
}
</style>
Same as before, except change 'flex-direction' appropriately, and adjust which margins are flexible.
Explicitly not handled; will wait for some later flexgrid or improvements to table or something.
<ul>
<li><a>Home</a></li>
<li><a>Products</a></li>
<li><a>About Us</a></li>
</ul>
<style>
ul {
display: flex;
flex-direction: lr;
}
li {
width: 1fl;
}
</style>
<ul>
<li><a>Home</a></li>
<li><a>Products</a></li>
<li><a>About Us</a></li>
</ul>
<style>
ul {
display: flex;
flex-direction: lr;
}
li {
width: flex(auto, 1fl);
text-align: center;
}
</style>
In here, the flex() function is for creating flexible lengths with a preferred length other than 0. The first argument specifies the preferred length, the second specifies the growing flexibility and optionally the maximum length, the third (optional) argument specifies the shrinking flexibility and optionally the minimum length.
Same as above, but with:
<style>
li {
padding: 1fl 0 0;
}
li.active {
padding: 0 0 1fl;
}
</style>
<list>
<h1>foo</h1>
<section>foo foo</section>
<h1>bar</h1>
<section>bar bar</section>
<h1>baz</h1>
<section>baz baz</section>
</list>
<style>
list {
display: flex;
flex-direction: tb;
}
section {
height: 0;
}
h1.active + section {
height: 1fl;
}
</style>
<tabs>
<tab>foo</tab>
<tab>bar</tab>
<tab class=active>baz</tab>
<tab>qux</tab>
</tabs>
<style>
tabs {
display: flex;
flex-direction: inline;
flex-align: baseline;
}
tab {
width: flex(auto, 1fl);
}
tab.active {
flex-index: 0;
}
</style>
Again, I am explicitly not addressing multiple lines right now.
<center>
<p>foo foo foo foo</p>
<p>bar bar<br>bar bar</p>
<p>baz baz baz baz baz baz baz baz baz baz</p>
</center>
<style>
center {
display: flex;
flex-direction: tb;
text-align: center;
}
center > * {
margin-left: 1fl;
margin-right: 1fl;
}
</style>
<message>
<grabber>
<input type=checkbox>
<star>
<attachment>
<recipients>you, me, them</recipients>
<important>
<subject>Is your foo not bar enough for your lady?</subject>
<time>10:04 am</time>
</message>
<style>
message {
display: flex;
flex-direction: lr;
}
recipients {
width: 145px;
overflow: hidden;
text-overflow: ellipsis;
}
subject {
width: 1fl;
min-width: 200px;
/* or */
width: flex(200px, 1fl);
}
</style>
<chatroom>
<messages>
<entry>
<input type=text>
<button type=submit>Enter</button>
</entry>
</chatroom>
<style>
chatroom {
display: flex;
flex-direction: tb;
min-width: 40em;
}
messages {
height: flex(10em, 1fl);
}
entry {
display: flex;
flex-direction: lr;
}
entry > input {
width: 1fl;
height: flex(auto, 1fl);
}
entry > button {
display: block;
height: flex(auto, 1fl);
}
</style>
<footer>
<leftinfo>foo</leftinfo>
<rightinfo>bar</leftinfo>
<maininfo>baz</maininfo>
</footer>
<style>
footer {
display: flex;
flex-direction: lr;
}
leftinfo {
flex-index: 1;
width: 200px;
}
rightinfo {
flex-index: 3;
width: 200px;
}
maininfo {
flex-index: 2;
width: flex(200px, 1fl);
}
</style>
<figure>
<figcaption>foo bar baz</figcaption>
<img>
</figure>
<style>
figure {
display: flex;
flex-direction: lr;
}
figure > img {
flex-index: 1;
}
figure > figcaption {
flex-index: 2;
width: 1fl;
min-width: 20em;
}
</style>