\nLos elementos se colocan a lo largo del eje principal (desde el inicio principal hasta el final principal) o del eje transversal (desde el inicio transversal hasta el final transversal).<\/p>\n
![\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/00-basic-terminology.svg\"](\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/00-basic-terminology.svg\")
- \n
- Eje principal: El eje principal del contenedor flexible es el eje principal a lo largo del cual se colocan los elementos flexibles. Tenga en cuenta que no es necesariamente horizontal. Depende de la propiedad flex-direction (ver m\u00e1s abajo).<\/li>\n
- Inicio principal | Extremo principal: los elementos flexibles se colocan dentro del contenedor comenzando desde el inicio principal y llegando hasta el extremo principal.<\/li>\n
- Tama\u00f1o original: el ancho o la altura de un elemento flexible, cualquiera que sea su dimensi\u00f3n original, corresponde al tama\u00f1o original del elemento. La propiedad de tama\u00f1o original del elemento flexible es "ancho" o "alto", la que sea su dimensi\u00f3n original.<\/li>\n
- Eje transversal: El eje perpendicular al eje principal se denomina eje transversal. Su direcci\u00f3n depende de la direcci\u00f3n del eje principal.<\/li>\n
- Inicio cruzado | final cruzado: las l\u00edneas flexibles se llenan con art\u00edculos y se colocan en el contenedor comenzando desde el lado de inicio cruzado del contenedor flexible y avanzando hacia el final cruzado.<\/li>\n
- Tama\u00f1o transversal: El ancho o la altura de un elemento flexible, cualquiera que sea su valor en la dimensi\u00f3n transversal, corresponde al tama\u00f1o transversal del elemento. La propiedad de tama\u00f1o transversal corresponde a la que se encuentre en la dimensi\u00f3n transversal, ya sea "ancho" o "alto".<\/li>\n<\/ul>\n
Caracter\u00edsticas de Flexbox<\/h2>\n
Propiedades para padres
\n(recipiente)<\/h5>\nMostrar<\/p>\n
Esto define un contenedor flexible. Seg\u00fan el valor dado, puede ser en l\u00ednea o en bloque. Proporciona un contexto flexible para todos sus elementos secundarios directos.<\/p>\n
\n.container {\r\ndisplay: flex; \/* or inline-flex *\/\r\n}<\/code><\/pre>\n<\/div>\ndirecci\u00f3n flexible<\/h5>\n
\nEsto crea el eje principal, determinando as\u00ed la direcci\u00f3n en la que se colocan los elementos flexibles dentro del contenedor flexible. Flexbox (salvo el ajuste opcional) es un concepto de dise\u00f1o unidireccional. Piense en los elementos flexibles como si estuvieran mayormente en filas horizontales o columnas verticales.<\/p>\n\n.container {\r\nflex-direction: row | row-reverse | column | column-reverse;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- ROW (predeterminado): De izquierda a derecha en izq. y de derecha a izquierda en dcha.<\/li>\n
- inversi\u00f3n de fila: de derecha a izquierda en ltr. de izquierda a derecha en rtl.<\/li>\n
- COLUMNA: Como la fila pero de arriba a abajo<\/li>\n
- Columna invertida: como la fila inversa pero de abajo a arriba<\/li>\n<\/ul>\n
Envoltura flexible<\/h5>\n
\nDe forma predeterminada, todos los elementos flexibles intentan caber en una sola l\u00ednea. Puede cambiar esto y permitir que los elementos se cierren con esta propiedad si es necesario.<\/p>\n\n.container {\r\nflex-wrap: nowrap | wrap | wrap-reverse;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- nowrap (predeterminado): todos los elementos flexibles se ajustar\u00e1n en una l\u00ednea<\/li>\n
- Envolver: los elementos flexibles se envuelven en varias l\u00edneas, de arriba a abajo.<\/li>\n
- wrap-reverse: los elementos flexibles se envuelven en varias l\u00edneas de abajo a arriba.<\/li>\n<\/ul>\n
FLEX-Flow<\/h5>\n
Esta es una abreviatura de las propiedades flex-direction y flex-width, que juntas especifican los ejes principal y transversal del contenedor flexible. El valor predeterminado es row nowrap.<\/p>\n
\n.container {\r\nflex-flow: column wrap;\r\n}<\/code><\/pre>\n<\/div>\nJustificar contenido<\/h5>\n
\nEsto especifica la alineaci\u00f3n a lo largo del eje principal. Ayuda a distribuir el exceso de espacio en blanco cuando todos los elementos flexibles de una l\u00ednea son inflexibles o flexibles, pero han alcanzado su tama\u00f1o m\u00e1ximo. Tambi\u00e9n proporciona cierto control sobre la alineaci\u00f3n de los elementos cuando estos desbordan la l\u00ednea.<\/p>\n\n.container {\r\njustify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- flex-start (predeterminado): los art\u00edculos se empaquetan hacia el inicio de la direcci\u00f3n flexible.<\/li>\n
- extremo flexible: los art\u00edculos se empaquetan hacia el final de la direcci\u00f3n flexible.<\/li>\n
- INICIO: Los elementos se empaquetan hacia el inicio de la direcci\u00f3n del modo de escritura.<\/li>\n
- FIN: Los elementos se empaquetan hacia el final de la direcci\u00f3n del modo de escritura.<\/li>\n
- IZQUIERDA: Los art\u00edculos se empaquetan hacia el borde izquierdo del contenedor, a menos que no tenga sentido con la direcci\u00f3n de flexi\u00f3n, en cuyo caso act\u00faa como inicio.<\/li>\n
- DERECHA: Los art\u00edculos se empaquetan hacia el borde derecho del contenedor, a menos que tenga sentido ser flexible en esa direcci\u00f3n, entonces act\u00faa como el final.<\/li>\n
- CENTRO: Los elementos se centran a lo largo de la l\u00ednea.<\/li>\n
- Espacio entre: Los elementos se distribuyen uniformemente en la fila. El primer elemento est\u00e1 en la l\u00ednea de salida y el \u00faltimo en la l\u00ednea de meta.<\/li>\n
- Espacio alrededor: Los elementos se distribuyen uniformemente en una l\u00ednea con el mismo espacio a su alrededor. Tenga en cuenta que visualmente los espacios no son iguales, ya que todos los elementos tienen el mismo espacio a ambos lados. El primer elemento tendr\u00e1 una unidad de espacio en el borde del contenedor, pero tendr\u00e1 dos unidades de espacio entre el siguiente elemento, ya que este tiene su propio espaciado.<\/li>\n
- Espacio uniforme: los elementos se distribuyen de tal manera que la distancia entre dos elementos (y la distancia a los bordes) es igual.<\/li>\n<\/ul>\n
Tambi\u00e9n hay dos palabras clave adicionales que puedes combinar con estos valores: seguro e inseguro. Usar seguro garantiza que, independientemente de c\u00f3mo realices este tipo de posicionamiento, no puedas desplazar un elemento tan lejos de la p\u00e1gina (por ejemplo, fuera de la parte superior) que impida navegar por el contenido (lo que se conoce como "p\u00e9rdida de datos").<\/p>\n
Alinear elementos<\/h5>\n
\nEsto define el comportamiento predeterminado de la disposici\u00f3n de los elementos flexibles a lo largo del eje transversal en la l\u00ednea actual. Consid\u00e9relo como la versi\u00f3n de justificaci\u00f3n del contenido para el eje transversal (perpendicular al eje principal).<\/p>\n\n.container {\r\nalign-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- STREtch (predeterminado): estirar para llenar el contenedor (a\u00fan respeta el ancho m\u00ednimo\/m\u00e1ximo)<\/li>\n
- Inicio flexible \/ Inicio \/ Inicio autom\u00e1tico: Los elementos se colocan al principio del eje transversal. La diferencia entre estos es sutil y se debe a que se respetan las reglas de direcci\u00f3n flexible o las reglas del modo de escritura.<\/li>\n
- flex-end \/ end \/ self-end: Los elementos se colocan al final del eje transversal. La diferencia es sutil y se basa en respetar las reglas de direcci\u00f3n flexible frente a las reglas del modo de escritura.<\/li>\n
- CENTRO: Los elementos se ubican en el eje transversal.<\/li>\n
- L\u00ednea base: los elementos se alinean como sus l\u00edneas base<\/li>\n<\/ul>\n
Alinear contenido<\/h5>\n
\nCuando hay espacio adicional en el eje transversal, se alinean las l\u00edneas del contenedor flexible en el interior, de manera similar a c\u00f3mo justify-content alinea elementos individuales en el eje principal.<\/p>\n\n.container {\r\nalign-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;\r\n}<\/code><\/pre>\n<\/div>\n- \n
- Normal (predeterminado): los elementos se empaquetan en su posici\u00f3n predeterminada como si no se hubiera establecido ning\u00fan valor.<\/li>\n
- flex-start \/ start: elementos envueltos al comienzo del contenedor. flex-start (con m\u00e1s soporte) indica la direcci\u00f3n flexible mientras que start respeta la direcci\u00f3n del modo de escritura.<\/li>\n
- flex-end \/ end: Elementos que se envuelven hasta el final del contenedor. (M\u00e1s soporte) flex-end indica la direcci\u00f3n de flexi\u00f3n, mientras que end respeta la direcci\u00f3n del modo de escritura.<\/li>\n
- CENTRO: Elementos que est\u00e1n en el centro del contenedor<\/li>\n
- Espacio entre elementos: Los elementos est\u00e1n espaciados uniformemente. La primera l\u00ednea est\u00e1 al principio del contenedor y la \u00faltima al final.<\/li>\n
- Espacio alrededor: los elementos se distribuyen uniformemente con el mismo espacio alrededor de cada l\u00ednea.<\/li>\n
- Espacio uniforme: los elementos se distribuyen uniformemente con el mismo espacio a su alrededor.<\/li>\n
- estirar: Las l\u00edneas se estiran para ocupar el espacio restante.<\/li>\n<\/ul>\n
Espacio, espacio entre filas, espacio entre columnas<\/h5>\n
\nLa propiedad gap controla expl\u00edcitamente el espacio entre elementos flexibles. Este espaciado solo se aplica entre elementos, no en los bordes exteriores.<\/p>\n\n.container {\r\ndisplay: flex;\r\n...\r\ngap: 10px;\r\ngap: 10px 20px; \/* row-gap column gap *\/\r\nrow-gap: 10px;\r\ncolumn-gap: 20px;\r\n}<\/code><\/pre>\n<\/div>\nEste comportamiento puede considerarse como un canal m\u00ednimo, de modo que si el canal es de alguna manera m\u00e1s grande (debido a algo como justify-content: spacing-between; ), entonces este espacio solo tendr\u00e1 un efecto cuando ese espacio se vuelva m\u00e1s peque\u00f1o.<\/p>\n
Esto no es exclusivo de Flexbox, los espacios tambi\u00e9n funcionan en dise\u00f1os de cuadr\u00edcula y de varias columnas.<\/p>\n
Prefijo Flexbox<\/h2>\n
Flexbox requiere algunos prefijos de proveedor para ser compatible con la mayor\u00eda de los navegadores. Esto no solo implica anteponer el prefijo de proveedor a los atributos, sino tener nombres y valores de propiedad completamente diferentes. Esto se debe a que la especificaci\u00f3n de Flexbox ha cambiado con el tiempo, creando versiones "antiguas", "intermedias" y "nuevas".<\/p>\n
Quiz\u00e1s la mejor forma de manejar esto es escribir con la sintaxis nueva (y final) y ejecutar su CSS a trav\u00e9s de Autoprefixer, que hace un buen uso de los retrocesos.<\/p>\n
Alternativamente, aqu\u00ed hay un Sass @mixin para ayudar con algunos prefijos, que tambi\u00e9n te dar\u00e1n una idea de qu\u00e9 tipo de cosas hacer:<\/p>\n
\n@mixin flexbox() {\r\ndisplay: -webkit-box;\r\ndisplay: -moz-box;\r\ndisplay: -ms-flexbox;\r\ndisplay: -webkit-flex;\r\ndisplay: flex;\r\n}\r\n@mixin flex($values) {\r\n-webkit-box-flex: $values;\r\n-moz-box-flex: $values;\r\n-webkit-flex: $values;\r\n-ms-flex: $values;\r\nflex: $values;\r\n}\r\n@mixin order($val) {\r\n-webkit-box-ordinal-group: $val; \r\n-moz-box-ordinal-group: $val; \r\n-ms-flex-order: $val; \r\n-webkit-order: $val; \r\norder: $val;\r\n}\r\n.wrapper {\r\n@include flexbox();\r\n}\r\n.item {\r\n@include flex(1 200px);\r\n@include order(2);\r\n}<\/code><\/pre>\n<\/div>\nEjemplos<\/h2>\n
Empecemos con un ejemplo muy sencillo que soluciona un problema casi cotidiano: el enfoque perfecto. Es facil\u00edsimo con Flexbox.<\/p>\n
\n<ul class=\"navigation\">\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">About<\/a><\/li>\r\n<li><a href=\"#\">Products<\/a><\/li>\r\n<li><a href=\"#\">Contact<\/a><\/li>\r\n<\/ul><\/code><\/pre>\n<\/div>\n\n.parent {\r\ndisplay: flex;\r\nheight: 300px; \/* Or whatever *\/\r\n}\r\n.child {\r\nwidth: 100px; \/* Or whatever *\/\r\nheight: 100px; \/* Or whatever *\/\r\nmargin: auto; \/* Magic! *\/\r\n}<\/code><\/pre>\n<\/div>\nEsto se debe a que un margen autoajustado en un contenedor flexible ocupar\u00e1 espacio adicional. Por lo tanto, al configurarlo, el elemento quedar\u00e1 perfectamente centrado en ambos ejes.<\/p>\n
Ahora usemos algunas propiedades m\u00e1s. Consideremos una lista de 6 elementos, todos con dimensiones fijas, pero con tama\u00f1o autom\u00e1tico. Queremos que se distribuyan uniformemente en el eje horizontal para que, al redimensionar el navegador, todo se ajuste correctamente sin necesidad de solicitar contenido multimedia.<\/p>\n
\n.flex-container {\r\n\/* We first create a flex layout context *\/\r\ndisplay: flex;\r\n\/* Then we define the flow direction \r\nand if we allow the items to wrap \r\n* Remember this is the same as:\r\n* flex-direction: row;\r\n* flex-wrap: wrap;\r\n*\/\r\nflex-flow: row wrap;\r\n\/* Then we define how is distributed the remaining space *\/\r\njustify-content: space-around;\r\n}<\/code><\/pre>\n<\/div>\nListo. Todo lo dem\u00e1s es solo cuesti\u00f3n de estilo. A continuaci\u00f3n se muestra un l\u00e1piz. Aseg\u00farate de ir a CodePen y ajustar el tama\u00f1o de las ventanas para ver qu\u00e9 sucede.<\/p>\n
Probemos algo diferente. Imaginemos que tenemos un elemento de navegaci\u00f3n alineado a la derecha en la parte superior de nuestro sitio web, pero queremos centrarlo en pantallas medianas y tener una sola columna en dispositivos peque\u00f1os. Es bastante sencillo.<\/p>\n
\n\/* Large *\/\r\n.navigation {\r\ndisplay: flex;\r\nflex-flow: row wrap;\r\n\/* This aligns items to the end line on main-axis *\/\r\njustify-content: flex-end;\r\n}\r\n\/* Medium screens *\/\r\n@media all and (max-width: 800px) {\r\n.navigation {\r\n\/* When on medium sized screens, we center it by evenly distributing empty space around items *\/\r\njustify-content: space-around;\r\n}\r\n}\r\n\/* Small screens *\/\r\n@media all and (max-width: 500px) {\r\n.navigation {\r\n\/* On small screens, we are no longer using row direction but column *\/\r\nflex-direction: column;\r\n}\r\n}<\/code><\/pre>\n<\/div>\nProbemos algo mejor y experimentemos con la flexibilidad de los elementos flexibles. \u00bfQu\u00e9 tal un dise\u00f1o de 3 columnas, enfocado en dispositivos m\u00f3viles, con encabezado y pie de p\u00e1gina de ancho completo? Independientemente del orden de origen.<\/p>\n
\n<div class=\"wrapper\">\r\n<header class=\"header\">Header<\/header>\r\n<article class=\"main\">\r\n<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<\/p> \r\n<\/article>\r\n<aside class=\"aside aside-1\">Aside 1<\/aside>\r\n<aside class=\"aside aside-2\">Aside 2<\/aside>\r\n<footer class=\"footer\">Footer<\/footer>\r\n<\/div><\/code><\/pre>\n<\/div>\n\n\n.wrapper {\r\ndisplay: flex;\r\nflex-flow: row wrap;\r\n}\r\n\r\n\/* We tell all items to be 100% width, via flex-basis *\/\r\n.wrapper > * {\r\nflex: 1 100%;\r\n}\r\n\r\n\/* We rely on source order for mobile-first approach\r\n* in this case:\r\n* 1. header\r\n* 2. article\r\n* 3. aside 1\r\n* 4. aside 2\r\n* 5. footer\r\n*\/\r\n\/* Medium screens *\/\r\n@media all and (min-width: 600px) {\r\n\/* We tell both sidebars to share a row *\/\r\n.aside { flex: 1 auto; }\r\n}\r\n\/* Large screens *\/\r\n@media all and (min-width: 800px) {\r\n\/* We invert order of first sidebar and main\r\n* And tell the main element to take twice as much width as the other two sidebars\r\n*\/\r\n.main { flex: 3 0px; }\r\n.aside-1 { order: 1; }\r\n.main { order: 2; }\r\n.aside-2 { order: 3; }\r\n.footer { order: 4; }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/p>","protected":false},"excerpt":{"rendered":"Introducci\u00f3n a nuestra gu\u00eda completa sobre maquetaci\u00f3n con flexbox en CSS. Esta gu\u00eda explica todo sobre flexbox\u2026","protected":false},"author":1,"featured_media":15558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363,375],"tags":[374,418],"class_list":{"0":"post-15555","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"category-375","10":"tag-css","11":"tag-website"},"yoast_head":"\n
\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/a-guide-to-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 CSS flexbox. \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f flexbox \u062a\u0648\u0636\u06cc\u062d…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/a-guide-to-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-08T21:36:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox\",\"datePublished\":\"2024-05-08T21:36:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"},\"wordCount\":96,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"keywords\":[\"css\",\"website\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\",\"\u0648\u0628 \u0633\u0627\u06cc\u062a\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\",\"name\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"datePublished\":\"2024-05-08T21:36:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/05\\\/09010518\\\/flex.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/a-guide-to-flexbox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/es\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"La gu\u00eda completa de Flexbox - Blog de ITPiran","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/a-guide-to-flexbox\/","og_locale":"es_ES","og_type":"article","og_title":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 CSS flexbox. \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f flexbox \u062a\u0648\u0636\u06cc\u062d…","og_url":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/a-guide-to-flexbox\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-05-08T21:36:55+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox","datePublished":"2024-05-08T21:36:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"},"wordCount":96,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","keywords":["css","website"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc","\u0648\u0628 \u0633\u0627\u06cc\u062a"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/","name":"La gu\u00eda completa de Flexbox - Blog de ITPiran","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","datePublished":"2024-05-08T21:36:55+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/05\/09010518\/flex.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/a-guide-to-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 Flexbox"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"Blog de ITPiran","description":"Noticias y art\u00edculos sobre comercio sostenible en Ir\u00e1n","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Blog sobre negocios iran\u00edes sostenibles","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"administraci\u00f3n","url":"https:\/\/www.itpiran.net\/blog\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/comments?post=15555"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15555\/revisions"}],"predecessor-version":[{"id":15559,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15555\/revisions\/15559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media\/15558"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media?parent=15555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/categories?post=15555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/tags?post=15555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}