Re: [css3-flexbox] Flexbox issues

--------------------------------------------------
From: "Tab Atkins Jr." <jackalmage@gmail.com>
Sent: Thursday, April 15, 2010 11:17 AM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: "www-style list" <www-style@w3.org>
Subject: Re: [css3-flexbox] Flexbox issues

> On Wed, Apr 14, 2010 at 8:36 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> So far clear: 'left' | 'right' works in flow: vertical-flow ( a.k.a.
>> vertical-wrap)
>> containers with the meaning 'before' | 'after'.
>
> I don't understand what "after" could mean in a flexbox.  Does it mean
> that the *next* element is forced onto a new line?
>

row/column break is a virtual position of something between elements.
So clear:before breaks the row/column makes element first in the column/row 
and
clear:after breaks the row/column and makes the element last
in the row/column.

And this:

li:nth-child(3)
{
   clear:both;
   width:*;
}

creates row/column that will have single element li:nth-child(3)
that will span whole width of its container.

Here is how it looks like:

   http://terrainformatica.com/w3/horizontal-flow.png

Document is:

<html>
  <head>
    <style>
    ul
    {
      margin:0;
      padding:0;
      flow:horizontal-flow;
      border: 1px solid blue;
      size:*;
    }
    ul > li
    {
      width:*;
      height:*;
      display:block;
      background:#FBC;
      border:1px solid red;
      margin: 4px;
    }
    ul > li:nth-child(3)
    {
      clear:both;
    }
    </style>
  </head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5555<br/>55555</li>
  </ul>
</body>
</html>

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Friday, 16 April 2010 02:43:46 UTC