Re: [css3-flexbox] Centering elements

This is more general than flexbox. Lets give control over how to handle
overflow in general, e.g., something like position-contain from
http://www.xanthir.com/blog/b48H0?

On Wed, Sep 7, 2011 at 6:20 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

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