Flexbox

Ueyen flexbox system allows easy positioning and a powerful combinaion system to create any layout using CSS flex.



Description

The Ueyen flexbox system is designed to be very intuitive. It is very easy to learn how to use it and it allows combining any direction to form your own selector. The selectors are designed the way that replacing the position if the directions in a selector will not cause redundancy.


The simplest flexbox selector is un-fl which creates a very simple flexbox item with no specific direction.


un-fl

A simple flex item


Simple directions

The following class selectors create a.



un-fl-t

top aligned

un-fl-r

right aligned

un-fl-b

bottom aligned

un-fl-l

left aligned

un-fl-c

center aligned



Combined directions

The following class selectors create a.



un-fl-t-c

top - center aligned

un-fl-t-r

top - right aligned

un-fl-t-l

top - left aligned

un-fl-b-c

bottom - center aligned

un-fl-b-r

bottom - right aligned

un-fl-b-l

bottom - left aligned

un-fl-co-t-c

Column and top - center aligned

un-fl-co-t-r

Column and top - right aligned

un-fl-co-t-l

Column and top - left aligned

un-fl-co-b-c

Column and bottom - center aligned

un-fl-co-b-r

Column and bottom - right aligned

un-fl-co-b-l

Column and bottom - left aligned

un-fl-sb

Space between

un-fl-co-sb

Column and space between

un-fl-st

Stretch

un-fl-co-st

Column stretch

un-fl-w

Flex wrap





You can change the way you type the class name
For example: un-fl-t-r will give the exact same result as un-fl-r-t.
un-fl-co-l-b gives the same result as un-fl-b-l-co

in a nutshell, you do not have to remember the order of flex class names, only remember the following rule:

-t is for top aligning
-r is for right aligning
-b is for bottom aligning
-l is for left aligning
-c is for center aligning
-sb is for space between aligning
-st is for stretching the children
-co is for column (which can accompained with all the ones above)


Example of basic use

The following example shows a few containers with multiple flex selectors.


Markup



    
  <!-- Centered -->
        
One

        
One

    

    
  <!-- Top-right -->
        
Two

        
Two

    

    
  <!-- Bottom-center column -->
        
Three

        
Three

        
Three
One
One
Two
Two
Two
Two


Flex and breakpoints

All the selectors in the basic mode can be followed by :s to :h (small to huge) to apply the flexbox on different breakpoints.



:s

Larger than Breakpoint Small

:m

Larger than Breakpoint Large.

:l

Larger than Breakpoint large.

:h

Larger than Breakpoint Huge.



Example of using flex with brekpoints

The following flex container has these class names: un-fl-c un-fl-b-r:l un-fl-t-l:h


The result will be:

un-fl Center by default.

un-fl-b-r:m 2 Buttom-right aligned after breakpoint large.

un-fl-t-l:h 3 Top-left aligned after breakpoint huge.



Markup



        
Three

        
Three

        
Three


Four
Four
Four