Flows

Css flex layout micro-framework to make smooth design like a flows

Flow is an optional sub system, do not use it for small website

div-flow axis="x" type="loose"

     

div-flow axis="x" type="loose"

[i] you can add --growed-contents | content [i] you can add --stretch-contents | content [i] you can add --fit-contents | content                                                                                          

div-flow axis="x" type="unwrap"

[i] you can set --snap-in-start | --snap-in-center (standard) | --snap-in-end [i] wrap the content in div-scroll axis="x" for a dedicated horizontal scroller                    

div-flow axis="y" type="loose"

                 

div-flow axis="y" type="unwrap"

[i] you can set --snap-in-start | --snap-in-center (standard) | --snap-in-end [i] wrap the content in div-scroll axis="y" for a dedicated vertical scroller                  

Flow accessory classes (beta)

These transitional helpers belong only to div-flow. They can simplify local content alignment, but they are not intended to become the main layout system of a page.

  • --growed-content / --growed-contents — Lets one direct child, or every direct child, grow into the available horizontal space.
  • --stretch-content / --stretch-contents — Extends one direct child, or every direct child, across the Flow cross axis.
  • --fit-content / --fit-contents — Keeps inner content fitted and aligned while covering the Flow cross axis.
  • --snap-in-start / --snap-in-center / --snap-in-end — Chooses the snap point used by a Flow with type="unwrap".
  • --top-* / --middle-* / --bottom-* — Aligns normal Flow children using left, center, right or distributed. It does not create relative or absolute positioning.

Flow alignment

[i] alignment is optional; without a modifier the Flow distributes contents across its axis                  
[i] with --growed-content       [i] with --growed-contents      
[i] with x/y percentage steps      
[i] you can add --stretch-contents/--stretch-content --fit-contents/--fit-content

I'm --fit-content

I'm --stretch-content