{"id":18358884,"url":"https://github.com/uppercod/postcss-chef","last_synced_at":"2025-04-10T03:07:33.798Z","repository":{"id":113251384,"uuid":"129558858","full_name":"UpperCod/postcss-chef","owner":"UpperCod","description":"It is a small postcss library capable of simplifying the creation of flexbox-based layout.","archived":false,"fork":false,"pushed_at":"2018-04-14T22:25:27.000Z","size":1085,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-23T22:26:57.771Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UpperCod.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-14T22:24:53.000Z","updated_at":"2018-04-14T22:25:29.000Z","dependencies_parsed_at":"2023-03-13T13:22:03.628Z","dependency_job_id":null,"html_url":"https://github.com/UpperCod/postcss-chef","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fpostcss-chef","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fpostcss-chef/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fpostcss-chef/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fpostcss-chef/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UpperCod","download_url":"https://codeload.github.com/UpperCod/postcss-chef/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239036198,"owners_count":19571459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T22:19:49.822Z","updated_at":"2025-02-15T18:30:06.830Z","avatar_url":"https://github.com/UpperCod.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![Logotipo Chef](/images/logo.png)\n\n# chef-flex\n\nEs una pequeña librería de postcss capaz de simplificar la creación de layout a base  de flexbox.\n\n## Ejemplo\n\n**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\n\n\n## row\n\npermite que el contenido dentro del contenedor se alinea como enseña la imagen.\n\n![Ejemplo de alineación](/images/row.png)\n\n```css\n/**entrada**/\n.container{\n   chef-flex : row;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : row;\n   flex-wrap : wrap;\n}\n```\n\n##column\n\npermite que el contenido dentro del contenedor se alinea como enseña la imagen.\n\n\n![Ejemplo de alineación](/images/column.png)\n\n```css\n/**entrada**/\n.container{\n   chef-flex : column;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : column;\n   flex-wrap : nowrap;\n}\n```\n\n## inline\n\ncontenedor que resetea el largo a automático y modifica la propiedad display flex por inline-flex\n\n```css\n/**entrada**/\n.container{\n   chef-flex : row inline;\n}\n/**salida**/\n.container{\n   display:inline-flex;\n   flex-direction : row;\n   flex-wrap : wrap;\n}\n```\n\n\n## top\n\npermite direccionar el contenido en la parte superior del contenedor\n\n![Ejemplo de alineación](/images/top.jpg)\n\n### row\n```css\n/**entrada**/\n.container{\n   chef-flex : row top;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : row;\n   flex-wrap : wrap;\n   align-items: flex-start;\n}\n```\n### column\n```css\n/**entrada**/\n.container{\n   chef-flex : column top;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : column;\n   flex-wrap : wrap;\n   justify-content: flex-start;\n}\n```\n\n## right\n\npermite direccionar el contenido en la parte derecha del contenedor\n\n![Ejemplo de alineación](/images/right.jpg)\n\n### row\n```css\n/**entrada**/\n.container{\n   chef-flex : row right;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : row;\n   flex-wrap : wrap;\n   justify-content: flex-end;\n}\n```\n### column\n```css\n/**entrada**/\n.container{\n   chef-flex : column right;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : column;\n   flex-wrap : wrap;\n   align-items:flex-end;\n}\n```\n\n## bottom\n\npermite direccionar el contenido en la parte inferior del contenedor\n\n![Ejemplo de alineación](/images/bottom.jpg)\n\n### row\n```css\n/**entrada**/\n.container{\n   chef-flex : row bottom;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : row;\n   flex-wrap : wrap;\n   align-items: flex-end;\n}\n```\n### column\n```css\n/**entrada**/\n.container{\n   chef-flex : column bottom;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : column;\n   flex-wrap : wrap;\n   justify-content: flex-end;\n}\n```\n\n## left\n\npermite ampliar el contenido en la parte izquierda del contenedor\n\n![Ejemplo de alineación](/images/left.jpg)\n\n\n### row\n```css\n/**entrada**/\n.container{\n   chef-flex : row left;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : row;\n   flex-wrap : wrap;\n   justify-content: flex-start;\n}\n```\n### column\n```css\n/**entrada**/\n.container{\n   chef-flex : column left;\n}\n/**salida**/\n.container{\n   display:flex;\n   flex-direction : column;\n   flex-wrap : wrap;\n   align-items:flex-start;\n}\n```\n\n\n## middle\n\npermite direccionar el contenido al centro del en el eje Y\n\n![Ejemplo de alineación](/images/middle.jpg)\n\n\n### row\n```css\n/**entrada**/\n.container{\n   chef-flex : row middle;\n}\n/**salida**/\n.container{\n   display: flex;\n   flex-direction: row;\n   flex-wrap: wrap;\n   align-items: center;\n}\n```\n### column\n```css\n/**entrada**/\n.container{\n   chef-flex : column middle;\n}\n/**salida**/\n.container{\n   display: flex;\n   flex-direction: column;\n   flex-wrap: nowrap;\n   justify-content: center;\n}\n```\n\n\n## center\n\npermite direccionar el contenido al centro del en el eje X\n\n![Ejemplo de alineación](/images/center.jpg)\n\n### row\n```css\n/**entrada**/\n.container{\n   chef-flex : row middle;\n}\n/**salida**/\n.container{\n   display: flex;\n   flex-direction: row;\n   flex-wrap: wrap;\n   justify-content: center;\n}\n```\n### column\n```css\n/**entrada**/\n.container{\n   chef-flex : column middle;\n}\n/**salida**/\n.container{\n   display: flex;\n   flex-direction: column;\n   flex-wrap: nowrap;\n   align-items: center;\n}\n```\n\n\n## centered\n\npermite apilar todo el contenido al centro\n\n![Ejemplo de alineación](/images/centered.jpg)\n\n### row\n```css\n/**entrada**/\n.container{\n   chef-flex : row middle;\n}\n/**salida**/\n.container{\n   display: flex;\n   flex-direction: row;\n   flex-wrap: wrap;\n   justify-content: center;\n   align-items: center;\n}\n```\n### column\n```css\n/**entrada**/\n.container{\n   chef-flex : column middle;\n}\n/**salida**/\n.container{\n   display: flex;\n   flex-direction: column;\n   flex-wrap: nowrap;\n   align-items: center;\n   justify-content: center;\n}\n```\n\n\n\n## flex(split)\n\notorga la propiedad de ancho autoajustable\n\n![Ejemplo de alineación](/images/split.jpg)\n\n```css\n.container{\n  flex: 1 1 0%;\n}\n```\n\n## flex(reset)\n\notorga la propiedad de ancho autoajustable\n\n![Ejemplo de alineación](/images/split.jpg)\n\n```css\n.container{\n   flex: 0 0 auto;\n}\n```\n\n## relative | absolute | fixed\n\npermite definir si el contenedor posee la propiedad **position** como **relative, absolute o fixed**.\n\n## around | between | evenly\n\npermite definir si el contenedor posee la propiedad **justify-content** como **around, between o evenly**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Fpostcss-chef","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuppercod%2Fpostcss-chef","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Fpostcss-chef/lists"}