Re: [CSS3] horizontal/vertical-align ?

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.

~TJ

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