W3C home > Mailing lists > Public > www-style@w3.org > April 2010

Re: [CSS3] horizontal/vertical-align ?

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sat, 24 Apr 2010 08:43:09 -0700
Message-ID: <g2udd0fbad1004240843hd126054cx883629b890e1f42f@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
On Sat, Apr 24, 2010 at 12:26 AM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
>> On Friday 2010-04-23 23:11 -0700, Andrew Fedoniouk wrote:
> David, are you saying that for the markup
>   <div id="div1">
>     <button id="button1">Hello</button>
>     <button id="button2">Goodbye</button>
>   </div>
> these styles (taken from Flexbox document):
>   #div1 { display: box; box-orient:horizontal; width: 300px; }
>   #button1 { box-flex: 1.0; width: 100px; }
>   #button2 { box-flex: 2.0; width: 140px; }
> are easier to spec/have less interaction edges than this:
>   #div1 { flow:horizontal; width: 300px; }
>   #button1 { width: 1*;  }
>   #button2 { width: 2*;  }
> ?

No, in such a simple situation it's largely the same thing.  The
problems come when you mix in the more complex properties and
situations designed around document formatting.

> As for my educated knowledge flow/flex has exactly the same  set of things
> that need to be specified.
> box-orient:horizontal; is exactly flow:horizontal
> so to specify flow:horizontal you will need same number of words as for
> box-orient:horizontal.
> So is my confusion.

As long as you stick to the simplest possible concepts, then yes,
those simple concepts are the same across the flexbox model and your
flow model.

> And BTW another question:
> what width will have box defined as: { box-flex: 1.0; width: 100px; }
> ?
> As far as I understand if you have fixed width defined then you cannot speak
> about its flexibility anymore.
> So it appears as box-flex is already conflicting with such basic property as
> width/height. How you guys solve such conflicts?

The 'width' property is a starting-point when box-flex is active; it
provides a "preferred width" for the box.  The box will still grow or
shrink as appropriate if the sum of all the preferred widths of the
children of the flexbox are more/less than the width of the flexbox.
Only max/min-width actually prevent flexing past some bound.

The example you cite from the spec earlier in your email shows exactly
how this works.

Received on Saturday, 24 April 2010 15:44:02 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:45 UTC