https://github.com/uppercod/postcss-chef
It is a small postcss library capable of simplifying the creation of flexbox-based layout.
https://github.com/uppercod/postcss-chef
Last synced: about 1 year ago
JSON representation
It is a small postcss library capable of simplifying the creation of flexbox-based layout.
- Host: GitHub
- URL: https://github.com/uppercod/postcss-chef
- Owner: UpperCod
- License: apache-2.0
- Created: 2018-04-14T22:24:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-14T22:25:27.000Z (about 8 years ago)
- Last Synced: 2024-12-23T22:26:57.771Z (over 1 year ago)
- Language: JavaScript
- Size: 1.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```css
/**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.
```css
/**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
```css
/**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
```css
/**entrada**/
.container{
chef-flex : row top;
}
/**salida**/
.container{
display:flex;
flex-direction : row;
flex-wrap : wrap;
align-items: flex-start;
}
```
### column
```css
/**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
```css
/**entrada**/
.container{
chef-flex : row right;
}
/**salida**/
.container{
display:flex;
flex-direction : row;
flex-wrap : wrap;
justify-content: flex-end;
}
```
### column
```css
/**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
```css
/**entrada**/
.container{
chef-flex : row bottom;
}
/**salida**/
.container{
display:flex;
flex-direction : row;
flex-wrap : wrap;
align-items: flex-end;
}
```
### column
```css
/**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
```css
/**entrada**/
.container{
chef-flex : row left;
}
/**salida**/
.container{
display:flex;
flex-direction : row;
flex-wrap : wrap;
justify-content: flex-start;
}
```
### column
```css
/**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
```css
/**entrada**/
.container{
chef-flex : row middle;
}
/**salida**/
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
```
### column
```css
/**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
```css
/**entrada**/
.container{
chef-flex : row middle;
}
/**salida**/
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
```
### column
```css
/**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
```css
/**entrada**/
.container{
chef-flex : row middle;
}
/**salida**/
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
```
### column
```css
/**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
```css
.container{
flex: 1 1 0%;
}
```
## flex(reset)
otorga la propiedad de ancho autoajustable
```css
.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**.