An exploration of what options there are for aligning things in the transverse axis, along with several syntaxes for achieving each.
For each diagram, the cell itself should be read as a horizontal flexbox, with the boxes inside them the flexbox children.
| Diagram | Combined Align | Align + Margin (full) | Align + Margin (reduced) | Old Draft | Align + Switch |
|---|---|---|---|---|---|
|
foobar
foobar
foo
bar | flex-align: before before; | flex-align: before; margin-bottom: auto; | flex-align: [anything]; margin-bottom: auto; | box-align: start; | flex-align: before shrink; |
|
foobar
foobar
foo
bar | flex-align: before baseline; | flex-align: baseline; margin-bottom: auto; | |||
|
foobar
foobar
foo
bar | box-align: baseline; | flex-align: baseline shrink; (Or possibly #7 instead.) | |||
|
foobar
foobar
foo
bar | flex-align: before middle; | flex-align: middle; margin-bottom: auto; | |||
|
foobar
foobar
foo
bar | flex-align: before after; | flex-align: after; margin-bottom: auto; | |||
|
foobar
foobar
foo
bar | flex-align: middle before; | flex-align: before; margin-top: auto; margin-bottom: auto; | |||
|
foobar
foobar
foo
bar | flex-align: middle baseline; | flex-align: baseline; margin-top: auto; margin-bottom: auto; | flex-align: baseline shrink; (Or possibly #3 instead.) | ||
|
foobar
foobar
foo
bar | flex-align: middle middle; | flex-align: middle; margin-top: auto; margin-bottom: auto; | flex-align: [anything]; margin-top: auto; margin-bottom: auto; | box-align: middle; | flex-align: middle shrink; |
|
foobar
foobar
foo
bar | flex-align: middle after; | flex-align: after; margin-top: auto; margin-bottom: auto; | |||
|
foobar
foobar
foo
bar | flex-align: after before; | flex-align: before; margin-top: auto; | |||
|
foobar
foobar
foo
bar | flex-align: after baseline; | flex-align: baseline; margin-top: auto; | |||
|
foobar
foobar
foo
bar | flex-align: after middle; | flex-align: middle; margin-top: auto; | |||
|
foobar
foobar
foo
bar | flex-align: after after; | flex-align: after; margin-top: auto; | flex-align: [anything]; margin-top: auto; | box-align: end; | flex-align: after shrink; |
|
foobar
foobar
foo
bar | flex-align: stretch before; | flex-align: before; height: auto; | flex-align: before; height: auto; | box-align: stretch; | flex-align: before stretch; |
|
foobar
foobar
foo
bar | flex-align: stretch baseline; | flex-align: baseline; height: auto; | flex-align: baseline; height: auto; | flex-align: baseline stretch; | |
|
foobar
foobar
foo
bar | flex-align: stretch middle; | flex-align: middle; height: auto; | flex-align: middle; height: auto; | flex-align: middle stretch; | |
|
foobar
foobar
foo
bar | flex-align: stretch after; | flex-align: after; height: auto; | flex-align: after; height: auto; | flex-align: after stretch; |