[css3-flexbox] Centering elements

During the last f2f, the topic of centering elements in a flexbox was
brought up.  Specifically, should centering be "true center" or "safe
center"?

In "true center", the center of the element is aligned with the center
of the flexbox.  No exceptions.

"safe center" is the same as "true center" most of the time, but if
the element would overflow, it instead aligns it to one of the edges
so that the element "safely" overflows in a scrollable direction (top
or left edge, in an English document).

Properties like 'text-align' implement a "safe center" behavior, and
that's reasonable.  However, I think Flexbox has usecases for "true
center" behavior.  For example, consider the following code:

<ul id=nav>
  <li>...
  <li>...
  <li>...
</ul>
<style>
#nav {
  display: flexbox;
  flex-flow: row;
  flex-pack: distribute;
  height: 60px;
}

#nav > li {
  flex-align: center;
  width: 100px;
  height: 60px;
}

#nav > li.active {
  width: 120px;
  height: 80px;
}
</style>

This code implements a horizontal navbar, where the items fill the
bar.  The currently active item is slightly larger than the other
items, and is intended to overflow the navbar slightly.  The navbar is
far enough down the page that it definitely won't overflow

If we have a "safe center" behavior, this is impossible to implement
without some hackery (for example, making the #nav actually 80px tall
and using negative margins and some funky backgrounds to make it look
like it's 60px tall).

On the other hand, "safe center" is useful sometimes.  Imagine a
toolbar going down the left edge of the page, where each item has an
icon and user-configurable label, and each item is centered (via
"flex-align:center").  If the label is too long (and a single word -
maybe the user is German?), you'd like the item to overflow safely so
the text can still be read.

Now, imagine the same example, but on the right side of the page.  Is
it necessary to provide a control for the overflow direction, so it'll
flow toward the center of the page?  Or is it okay to let it flow off
the side of the page and produce a scrollbar?

Alternately, and perhaps better, perhaps we could limit the "safety"
to only when it's absolutely needed - let things center themselves
properly, even when they overflow, *but* prevent them from overflowing
into the no-scroll zone by shifting them.  (We stop shifting when they
are no longer overflowing from that edge - there's nothing else we can
do if the flexbox itself is partially or completely in the
unscrollable zone.)


I somewhat favor the last solution as a "best of both worlds",
especially since it means I don't have to decide which behavior gets
to be called "center" and which gets a "true-/safe-center" keyword.

Though my examples all involve 'flex-align', the same argument applies
to 'flex-pack' and 'flex-line-pack'.  Authors using flexbox to center
a single item will expect both alignment directions to work the same.

~TJ

Received on Thursday, 8 September 2011 01:21:23 UTC