Re: Flexbox Draft, with pictures!

On Jun 1, 2010, at 3:46 PM, Tab Atkins Jr. wrote:

> On Tue, Jun 1, 2010 at 1:36 PM, David Hyatt <hyatt@apple.com> wrote:
>> On Jun 1, 2010, at 3:10 PM, Tab Atkins Jr. wrote:
>> 
>>>   I think it's the least useful
>>> of the box-align values, though, so I'm okay with not hitting it
>>> immediately.
>> 
>> I think you are seriously underestimating how common baseline alignment is with horizontal flexboxes.  Controls in dialogs are all baseline-aligned in XUL.  In Apple's uses of flexbox in our products, horizontal boxes are also typically baseline aligned.  This is basic behavior and is an absolute requirement.
>> 
>> A flexing textfield or dropdown list with a corresponding label is a common example of where you need baseline alignment.
> 
> I certainly could be!  I've never found much use for baseline
> alignment in anything I've personally done, so I'm extrapolating from
> that.  If baseline alignment is that important, then I need to make
> sure it's addressed in my proposal.
> 

Labels aligned with flexing controls is probably the most common example.  Keep in mind that flex is often used even in fixed width layouts to simply mean "give me all the remaining space."  It doesn't mean the control is going to be changing size.  In other words just start pulling up dialogs on OS X, and you'll see that the controls are baseline aligned, and that text fields and dropdown lists especially are getting all the remaining horizontal space.

In the back of your mind, you should always be thinking about how this is going to be extended into two dimensions.  Remember that flexbox has a two-dimensional version in XUL as well, and it's built on top of these flexbox primitives.  Dialogs are often grids of control labels and fields, and those labels have to baseline align with those controls.

In some cases these layouts can be achieved today using tables, but it's really cumbersome to do so, since you have to make flexing columns using * widths, and also make cells to wrap the objects you want to flex.  The flexing objects then have to have width:100% in order to fill the width of the enclosing cell.  It's a complete pain.

It's easy to get excited about the higher-level placement opportunities of flexbox, i.e., how it can help you lay out the sections of a page like the header, footer, contents, sidebars, etc., but flexbox is also extremely powerful when dealing with the nuts and bolts of controls sections as well... buttons, textfields, labels, etc.  It's used for more commonly for that in XUL than anything else.

> What precisely does it mean for things to be baseline-aligned in XUL,
> or in Apple's horizontal boxes?  The current Flexbox draft says that
> the boxes are positioned such that their first lines of text have
> their baselines aligned.  Is that consistent with what you guys do in
> your controls?
> 

Yes, first line.  This is motivated by multi-line labels in dialogs, since in such cases, you want to align with the first line and not the last.  You can find numerous examples of multi-line checkbox labels for example in OS X dialogs (or in Windows dialogs), and it's the first line that baseline aligns with the checkbox, not the last.  This behavior is also consistent with table cells, and flexboxes are much more like those than say inline-blocks, since flexboxes commonly extend into two dimensions.

> Do some elements in a horizontal box baseline-align while others do
> something else, or does the entire box baseline-align?  If the latter,
> is this just due to implementation details or is it actually rare to
> baseline-align only some of the children?

Again, if you look at dialogs, you don't usually see any variance regarding baseline alignment.  In other words, all the children typically baseline align within a row of a dialog.

I think we could just support vertical-align in horizontal boxes as a means of getting baseline alignment.  There would be many details to work out though.  I think you could probably say that any value that doesn't involve text alignment (baseline, text-top, text-bottom) would result in alignment using margin boxes (so vertical flex would be applied first).  If text-dependent vertical align values are used, stuff could still flex... you'd just move the box's position such that the baselines align (causing the child box to possibly stick out of its container).

Received on Tuesday, 1 June 2010 21:16:41 UTC