====== CSS Flexible Box Layout - Use Cases ====== This section is for documenting several flexbox usecases, and their solutions. ==== 1. toolbar, where items (images + labels) are evenly spaced ====

=== current draft ===	=== 2009 spec === //requires a spacer element//
foo foo ...	foo foo ...

==== 2. toolbar, where items are split into groups, and groups are evenly spaced ==== foo ... foo ... ... Or: foo foo foo ... ==== 3. Vertical and horizontal toolbars ==== Same as before, except change 'flex-direction' appropriately, and adjust which margins are flexible. ==== 4. Multiline toolbar (example: tool menus in GIMP), with items in different lines aligned ==== Explicitly not handled; will wait for some later flexgrid or improvements to table or something. ==== 5. Horizontal navbar with all items equal width, filling the width of the page. ====

Home
Products
About Us

==== 6. Horizontal navbar with all items equally spaced (widths can be different) ====

Home
Products
About Us

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. ==== 5b/6b. Horizontal navbar, with the active item indicated by positioning it differently (most items on bottom but active item is high, for example) ==== Same as above, but with: ==== 7. "Accordion"-style list - normally, only headers are visible. When you expand a section, previous headers are pushed up, later headers are pushed down. ====

foo

foo foo

bar

bar bar

baz

baz baz

==== 8. Tab stack, for cardstack-style displays like many OS options screen have. Tabs should be baseline aligned, should fill the width available. The current active tab may be shifted to the start of the list. Tabs may occupy multiple lines. ==== foo bar baz qux Again, I am explicitly not addressing multiple lines right now. ==== 9. The HTML element (its effects are extremely useful and still unduplicable in CSS). ====

foo foo foo foo

bar bar
bar bar

baz baz baz baz baz baz baz baz baz baz

==== 10. Gmail message display, with small indicators pressed against the left/right and the message title as wide as possible in the middle. ==== you, me, them Is your foo not bar enough for your lady? 10:04 am ==== 11. Chatroom input line, with a submit button on one side, and an or

filling all the remaining space on the line. (In the case of a textarea, the button is usually as tall as the textarea as well.) ====

<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>

==== 12. Footer with small bits of info on the left and right, and the main info centered between them.  (For some reason this was very popular in UI mockups at my old job.) ====

<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>

==== 13. In an article, like a recipe blog, have sections of picture+discription where the image is on one side and the text is on the other, and the text may be shorter or longer than the picture. Text shouldn't wrap under the picture. ====

<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>