/**
 * Container of flex elements
 * Children will automatically become flex-items
 */
.flexContainer
{
    display : -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display : flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

/**
 * Container of flex elements in inline mode
 * Children will automatically become flex-items
 */
.flexInlineContainer
{
    display : -webkit-inline-flex;
    display : inline-flex;
}

.flexWrap
{
    -webkit-flex-wrap   : wrap ;
    flex-wrap           : wrap ;
}

/**
 * When a **container** has this class, children will be horizontally distributed
 */
.flexRow
{
    -webkit-flex-direction  : row;
    flex-direction          : row;
}


/**
 * When a **container** has this class, children will be vertically distributed
 */
.flexColumn
{
    -webkit-flex-direction  : column;
    flex-direction          : column;
}

/**
 * When a **container** has this class, children will be positioned in the beginning of the container along the main
 * axis (row / column)
 */
.flexJustifyStart
{
    -webkit-justify-content : flex-start;
    justify-content : flex-start;
}

/**
 * When a **container** has this class, children will be positioned in the center of the container along the main
 * axis (row / column)
 */
.flexJustifyCenter
{
    -webkit-justify-content : center;
    justify-content : center;
}

/**
 * When a **container** has this class, children will be positioned in the end of the container along the main
 * axis (row / column)
 */
.flexJustifyEnd
{
    -webkit-justify-content : flex-end;
    justify-content : flex-end;
}

/**
 * When a **container** has this class, children will be positioned so that they take up the whole container with
 * space between them along the main axis (row / column)
 */
.flexJustifySpace
{
    -webkit-justify-content : space-between;
    justify-content : space-between;
}

/**
 * When a **container** has this class, children will be positioned in the beginning of the container along the
 * secondary axis (row / column)
 */
.flexAlignStart
{
    -webkit-align-items : flex-start;
    align-items : flex-start;
}

/**
 * When a **container** has this class, children will be positioned in the center of the container along the secondary
 * axis (row / column)
 */
.flexAlignCenter
{
    -webkit-align-items : center;
    align-items : center;
}

/**
 * When a **container** has this class, children will be positioned in the end of the container along the secondary
 * axis (row / column)
 */
.flexAlignEnd
{
    -webkit-align-items : flex-end;
    align-items : flex-end;
}

.flexCell
{
    -webkit-flex-grow: 1 ;
    -webkit-flex-shrink: 1 ;
    -webkit-flex-basis : auto ;
    flex-grow : 1 ;
    flex-shrink : 1;
    flex-basis : auto ;
}

/**
 * When a **flex child** has this class, it will be positioned in the beginning of the container along the secondary
 * axis (row / column)
 */
.flexAlignSelfStart
{
    -webkit-align-self  : flex-start;
    align-self          : flex-start;
}

/**
 * When a **flex child** has this class, it will be positioned in the center of the container along the secondary
 * axis (row / column)
 */
.flexAlignSelfCenter
{
    -webkit-align-self  : center;
    align-self          : center;
}

/**
 * When a **flex child** has this class, it will be positioned in the end of the container along the secondary
 * axis (row / column)
 */
.flexAlignSelfEnd
{
    -webkit-align-self  : flex-end;
    align-self          : flex-end;
}