chef-flex

Es una pequeña librería de postcss capaz de simplificar la creación de layout a base de flexbox.

Ejemplo

chef-flex analiza el uso de row y column, para modificar los parámetros que lo acompañen simplificando la definición al momento de construir layout con flexbox

row

permite que el contenido dentro del contenedor se alinea como enseña la imagen.

/**entrada**/
.container{
   chef-flex : row;
}
/**salida**/
.container{
   display:flex;
   flex-direction : row;
   flex-wrap : wrap;
}

##column

permite que el contenido dentro del contenedor se alinea como enseña la imagen.

/**entrada**/
.container{
   chef-flex : column;
}
/**salida**/
.container{
   display:flex;
   flex-direction : column;
   flex-wrap : nowrap;
}

inline

contenedor que resetea el largo a automático y modifica la propiedad display flex por inline-flex

/**entrada**/
.container{
   chef-flex : row inline;
}
/**salida**/
.container{
   display:inline-flex;
   flex-direction : row;
   flex-wrap : wrap;
}

top

permite direccionar el contenido en la parte superior del contenedor

row

/**entrada**/
.container{
   chef-flex : row top;
}
/**salida**/
.container{
   display:flex;
   flex-direction : row;
   flex-wrap : wrap;
   align-items: flex-start;
}

column

/**entrada**/
.container{
   chef-flex : column top;
}
/**salida**/
.container{
   display:flex;
   flex-direction : column;
   flex-wrap : wrap;
   justify-content: flex-start;
}

right

permite direccionar el contenido en la parte derecha del contenedor

row

/**entrada**/
.container{
   chef-flex : row right;
}
/**salida**/
.container{
   display:flex;
   flex-direction : row;
   flex-wrap : wrap;
   justify-content: flex-end;
}

column

/**entrada**/
.container{
   chef-flex : column right;
}
/**salida**/
.container{
   display:flex;
   flex-direction : column;
   flex-wrap : wrap;
   align-items:flex-end;
}

bottom

permite direccionar el contenido en la parte inferior del contenedor

row

/**entrada**/
.container{
   chef-flex : row bottom;
}
/**salida**/
.container{
   display:flex;
   flex-direction : row;
   flex-wrap : wrap;
   align-items: flex-end;
}

column

/**entrada**/
.container{
   chef-flex : column bottom;
}
/**salida**/
.container{
   display:flex;
   flex-direction : column;
   flex-wrap : wrap;
   justify-content: flex-end;
}

left

permite ampliar el contenido en la parte izquierda del contenedor

row

/**entrada**/
.container{
   chef-flex : row left;
}
/**salida**/
.container{
   display:flex;
   flex-direction : row;
   flex-wrap : wrap;
   justify-content: flex-start;
}

column

/**entrada**/
.container{
   chef-flex : column left;
}
/**salida**/
.container{
   display:flex;
   flex-direction : column;
   flex-wrap : wrap;
   align-items:flex-start;
}

middle

permite direccionar el contenido al centro del en el eje Y

row

/**entrada**/
.container{
   chef-flex : row middle;
}
/**salida**/
.container{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
}

column

/**entrada**/
.container{
   chef-flex : column middle;
}
/**salida**/
.container{
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: center;
}

center

permite direccionar el contenido al centro del en el eje X

row

/**entrada**/
.container{
   chef-flex : row middle;
}
/**salida**/
.container{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

column

/**entrada**/
.container{
   chef-flex : column middle;
}
/**salida**/
.container{
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
}

centered

permite apilar todo el contenido al centro

row

/**entrada**/
.container{
   chef-flex : row middle;
}
/**salida**/
.container{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

column

/**entrada**/
.container{
   chef-flex : column middle;
}
/**salida**/
.container{
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
}

flex(split)

otorga la propiedad de ancho autoajustable

.container{
  flex: 1 1 0%;
}

flex(reset)

otorga la propiedad de ancho autoajustable

.container{
   flex: 0 0 auto;
}

relative | absolute | fixed

permite definir si el contenedor posee la propiedad position como relative, absolute o fixed.

around | between | evenly

permite definir si el contenedor posee la propiedad justify-content como around, between o evenly.