# Challenge Current Flexbox draft Proposed Flexbox draft
1 stretch a box to the height of the line, and align content to the top of the box hbox { box-align: stretch; } hbox > * { padding-bottom: 1fl; } or hbox > * { height: 1fl; }
2 stretch a box to the height of the line, and align content to the bottom of the box Not possible hbox > * { padding-top: 1fl; }
3 stretch a box to the height of the line, and align content in the box Not possible hbox > * { padding: 1fl 0; }
4 stretch a box to the height of the line, and align the baselines of the content hbox { box-align: baseline; } Not currently possible, but proposed as
hbox > * { height: 1fl; vertical-align: baseline; }
5 shrink a box to its content's height, and align it at the top of the line hbox { box-align: start; } hbox > * { margin-bottom: 1fl; }
6 shrink a box to its content's height, and align it at the bottom of the line hbox { box-align: end; } hbox > * { margin-top: 1fl; }
7 shrink a box to its content's height, and align it in the center of the line hbox { box-align: center; } hbox > * { margin: 1fl 0; }
8 Shrink boxes to their content height, align most to the bottom of the line, align .current to the top of the line Not possible hbox > * { margin: 1fl 0 0; }
hbox > .current { margin: 0 0 1fl; }
9 Stretch boxes to the full height of the line, align the contents of most to the bottom of the box, align .current's contents to the top of the box Not possible hbox > * { padding: 1fl 0 0; }
hbox > .current { padding: 0 0 1fl; }
10 Center boxes on the line, but shift the box down by 5 pixels when hovered hbox { box-align: center; }
hbox > :hover { position: relative; top: 5px; } (This should work as long as relpos works as expected.) 		hbox > * { margin: 1fl 0; }
hbox > :hover { margin: calc(5px + 1fl) 0 1fl; } (This should also work with relpos.)
11 Shrink boxes partially, but not all the way to their content height, and center them in the line (If you know how much space you want extra around the content):
hbox { box-align: center; }
hbox > * { padding: <length> 0; } 		(If you know how much space you want extra around the content):
hbox > * { margin: 1fl 0; padding: <length> 0; }
(If you don't):
hbox > * { margin: 1fl 0; padding: .5fl 0; }
12 Shrinkwrap boxes and pack them into the "beginning" of the flexbox hbox { box-pack: start; } hbox { padding-right: 1fl; } (or padding-end, if you want writing-mode-independence)
13 Shrinkwrap boxes and pack them into the "end" of the flexbox hbox { box-pack: end; } hbox { padding-left: 1fl; } (or padding-start)
14 Shrinkwrap boxes and center them in the flexbox hbox { box-pack: center; } hbox { padding: 0 1fl; }
15 Shrinkwrap boxes and distribute them with even spacing between them, but no space at the start or end (like text justification) hbox { box-pack: justify; } Multiple ways:
hbox > * { margin-left: 1fl; }
hbox > :first-child { margin-left: 0; }
Or (suggested, not in draft):
hbox { flex-spacing: 1fl; }
hbox > * { width: fit-content; }
16 Shrinkwrap boxes and distribute them with even spacing between them and on each end Not possible hbox > * { margin: 0 1fl; }
17 Shrinkwrap boxes and distribute them with even spacing between them and "half spaces" at each end Not possible Multiple ways:
hbox > * { margin: 0 .5fl 0 1fl; }
hbox > :first-child { margin: 0 1fl 0 .5fl; }
Or (suggested, not in draft):
hbox { flex-spacing: 0; }
hbox > * { margin: 0 1fl; }
(flex-spacing:0 inhibits margin-collapsing - default value for flex-spacing is 'collapse', which doesn't inhibit)
18 Shrinkwrap boxes and pack some of them into the "beginning", then pack the rest into the "end" of the flexbox. Only possible with a dummy "spacer" element added into the markup between the two groups:
hbox > .spacer { box-flex: 1; } 		With a spacer element:
hbox > * { width: fit-content; }
hbox > .spacer { width: 1fl; }
Without a spacer, but with the first "end packed" element marked with a unique class:
hbox > * { width: fit-content; }
hbox > .end-packed { margin-left: 1fl; }
Without a spacer, but with all the "end packed" elements marked with a class:
hbox > * { width: fit-content; }
hbox > .end-packed { margin-left: 1fl; }
hbox > .end-packed + .end-packed { margin-left: 0; }
19 Make boxes start at their intrinsic width and then grow evenly as space is available hbox > * { box-flex: 1; } hbox > * { width: calc(fit-content + 1fl); }
Or (suggested, not in draft):
hbox > * { width: 1fla; }
20 Make boxes grow to equal size, but not if that would make any of them smaller than their intrinsic width Not quite possible, but maybe just through a spec bug, so may be doable as:
hbox > * { width: 0; min-width: fit-content; box-flex: 1; } 		hbox > * { width: 1fl; min-width: fit-content; }
21 Make boxes start at their intrinsic widths, and grow both their widths and the spacing between them as space is available Not possible hbox > * { width: 1fla; margin: 0 1fl; } (Modify for any particular behavior of the spaces on the end.)
22 Have boxes start at their intrinsic size with 10px of space between and grow their widths if free space is available, but shrink their spacing and keep their widths at intrinsic if they would overflow Not possible, but close:
hbox > * { margin: 0 10px; box-flex: 1; }
(Wrong because the width will decrease in overflow, not the margins) 		hbox > * { margin: min(10px, 1fl); width: 1fla; min-width: fit-content; }