Re: [css3-flexbox] Flex items with negative margins

On Tue, Nov 27, 2012 at 1:24 PM, Tony Chang <tony@chromium.org> wrote:
> What should happen if a flex item has a negative margin?
>
> Here's an example:
> <div style="display:flex; width: 100px">
>     <div id="a" style="flex: 1"></div>
>     <div id="b" style="width: 10px"></div>
> </div>
>
> If we give #b a left margin of -50px, what should happen?  In ToT WebKit and
> Gecko, this causes the available space to go from 90px to 140px and #a
> flexes to fill this.  #a ends up being 140px wide, overflowing the flexbox.
>
> I also get weird behavior when I set the cross axis margins to negative
> values because we think there's additional space in the cross direction.
>
> This seems very unintuitive.  I think the simplest thing to do is to treat
> negative margins as 0 both for calculating available space and for
> positioning.
>

Negative margins are pretty useful in some flex cases.

Consider this screenshot:
https://dl.dropbox.com/u/14981836/tabs.png

This element uses vertical and horizontal negative margins.

The markup of that tabs element is like this:

   <div class="tabs" #test>
      <div class="strip"> <!-- our tab strip, can be placed on any
side of tab container. -->
         <div panel="panel-id1" selected>tab1 caption</div>
         <div panel="panel-id2">tab2 caption</div>
         <div panel="panel-id3">tab3 caption</div>
      </div>
      <div name="panel-id1"> first panel content </div>
      <div name="panel-id2"> second panel content </div>
      <div name="panel-id3"> third panel content </div>
   </div>

And styles:

.tabs > .tabs-strip
{
  flow: horizontal; /* change to display:flexbox, etc. */
  padding: 2px 2px 0 2px;
  margin-bottom: -1px; /* to allow current tab to cover top
                                    border of the panel */
}

.tabs > .tabs-strip > div /* all tabs passive by default */
{
  padding: 3px 8px;
  margin-bottom:1px;
  height: *;
  width: max-content;
}

.tabs > .tabs-strip  > .current /* current, selected tab */
{
  /* to make it look "in front" */
  padding: 4px 10px 5px 10px; /* padding increased */
  margin:-2px -2px -1px -2px; /* but margin is negative to adjust
increased padding */
  position:relative; /* drawn on top of siblings */
}

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Tuesday, 27 November 2012 23:02:49 UTC