Re: Publishing the flexible box model

Alan Gresley wrote:
> Andrew Fedoniouk wrote:
>>
>> Robert O'Callahan wrote:
> [...]
>>> How do flexunits interact with absolute positioning and auto 
>>> top/left? Is the hypothetical position for the content computed 
>>> taking flexunit margins/padding on the content into account?
>>
>> Yes.
>>
>> Here is a screenshot if you wish:
>> http://terrainformatica.com/htmlayout/images/css-menus.png
>>
>> And here its style system:
>>
>> /* top level menu band */
>>     menu
>>     {
>>       flow:horizontal;  /* top level menu is a horizontal bar */
>>       width:max-intrinsic;
>>       padding-right:1*; /* spring on the right - all items sticked
>>                            to the left */
>>     }
>>
>>     menu li
>>     {
>>       display: block;    /* menu items are blocks*/
>>       position:relative; /* to make our popup relative to this one */
>>       height:1*;         /* all items in the menu bar have the same
>>                             height */
>>       padding:2px 4px;
>>     }
>>
>>     menu li:hover
>>     {
>>       background-color:navy;
>>       color:white;
>>     }
>>
>>     menu menu
>>     {
>>       flow: vertical;     /* popup menus are vertically replaced */
>>       min-width:100%;     /* at least it is caption wide */
>>       position:absolute;  /* out of normal flow */
>>       display:none;       /* non-visible normally */
>>     }
>>
>>     menu > li:hover > menu
>>     {
>>       display: block; /* now it is visible */
>>     }
>
>
> Andrew, this I have done without flex.
>
> http://css-class.com/articles/ursidae/bears3.htm
>
You cannot reproduce this with floats strictly speaking.

Key point here is height:1*;

    menu li
    {
      display: block;  /* menu items are blocks*/
      height:1*;         /* all items in the menu bar have the same  
height */
      padding:2px 4px;
    }

height:1*; means that all li's will have the same height - height of 
content of the
menu (minus that vertical paddings).

And if you say:
    menu li
    {
      display: block;  /* menu items are blocks*/
      margin-top:1*;
    }
then all elements will be aligned to the bottom of the container.

Floats simply have no concept of vertical alignment.

>
> When I bump the text up in all implementations the whole menus system 
> grows until it flows out of the viewpoint. Flex used this way breaks 
> basic accessibility principles. How can this work with a monitor with 
> a screen resolution of 800 by 600 pixels?
If you need to wrap such blocks on multiple rows then you will use:

menu
{ 
   flow: horizontal-flow;
}

that will create as many row boxes as needed to show its content in full 
for the given width.
Height of each row box is maximum height of elements in the row. Thus 
you can vertically align elements in these rows too.

There is also such thing as
menu
{ 
   flow: vertical-flow; 
}
that will do the same but in vertical direction - children will form 
columns expanding width of the container.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Tuesday, 10 June 2008 23:31:53 UTC