Xidipity

Knowledge Base

flex – container
Flexbox: Container
Xidipity WordPress Theme Knowledge Base Flexbox Content Header Image
column
 
  • class: fx:c
  • css: display: -ms-flexbox;
  •   display: -webkit-flex;
  •   display: flex;
  •   -webkit-flex-direction: column;
  •   -ms-flex-direction: column;
  •   flex-direction: column;
  •   -webkit-flex-wrap: nowrap;
  •   -ms-flex-wrap: nowrap;
  •   flex-wrap: nowrap;

 

column (display items in reverse order)
 
  • class: fx:c-rev
  • css: display: -ms-flexbox;
  •   display: -webkit-flex;
  •   display: flex;
  •   -webkit-flex-direction: column-reverse;
  •   -ms-flex-direction: column-reverse;
  •   flex-direction: column-reverse;
  •   -webkit-flex-wrap: nowrap;
  •   -ms-flex-wrap: nowrap;
  •   flex-wrap: nowrap;

 

column (wrap items)
 
  • class: fx:cw
  • css: display: -ms-flexbox;
  •   display: -webkit-flex;
  •   display: flex;
  •   -webkit-flex-direction: column;
  •   -ms-flex-direction: column;
  •   flex-direction: column;
  •   -webkit-flex-wrap: wrap;
  •   -ms-flex-wrap: wrap;
  •   flex-wrap: wrap;

 

column (display in reverse order, wrap items)
 
  • class: fx:cw-rev
  • css: display: -ms-flexbox;
  •   display: -webkit-flex;
  •   display: flex;
  •   -webkit-flex-direction: column-reverse;
  •   -ms-flex-direction: column-reverse;
  •   flex-direction: column-reverse;
  •   -webkit-flex-wrap: wrap;
  •   -ms-flex-wrap: wrap;
  •   flex-wrap: wrap;

 

row
 
  • class: fx:r
  • css: display: -ms-flexbox;
  •   display: -webkit-flex;
  •   display: flex;
  •   -webkit-flex-direction: row;
  •   -ms-flex-direction: row;
  •   flex-direction: row;
  •   -webkit-flex-wrap: nowrap;
  •   -ms-flex-wrap: nowrap;
  •   flex-wrap: nowrap;

 

row (display items in reverse order)
 
  • class: fx:r-rev
  • css: display: -ms-flexbox;
  •   display: -webkit-flex;
  •   display: flex;
  •   -webkit-flex-direction: row-reverse;
  •   -ms-flex-direction: row-reverse;
  •   flex-direction: row-reverse;
  •   -webkit-flex-wrap: nowrap;
  •   -ms-flex-wrap: nowrap;
  •   flex-wrap: nowrap;

 

row (wrap items)
 
  • class: fx:rw
  • css: display: -ms-flexbox;
  •   display: -webkit-flex;
  •   display: flex;
  •   -webkit-flex-direction: row;
  •   -ms-flex-direction: row;
  •   flex-direction: row;
  •   -webkit-flex-wrap: wrap;
  •   -ms-flex-wrap: wrap;
  •   flex-wrap: wrap;

 

row (display in reverse order, wrap items)
 
  • class: fx:rw-rev
  • css: display: -ms-flexbox;
  •   display: -webkit-flex;
  •   display: flex;
  •   -webkit-flex-direction: row-reverse;
  •   -ms-flex-direction: row-reverse;
  •   flex-direction: row-reverse;
  •   -webkit-flex-wrap: wrap;
  •   -ms-flex-wrap: wrap;
  •   flex-wrap: wrap;

 

Abbreviations
 
AbbreviationDefinition
fxflexbox
ccolumn
rrow
revreverse
wwrap

 

Supported media
 
AbbreviationDefinition
all
sm)small
md)medium
lg)large
xlextra large
Notes
 

All flexbox classes begin with “fx” and are separated by a colon from it’s value.


  • Since: v1.0.0

 

May 20, 2022