{"id":494,"date":"2023-11-16T22:20:16","date_gmt":"2023-11-16T22:20:16","guid":{"rendered":"https:\/\/javigomez.org\/?p=494"},"modified":"2025-09-29T20:33:55","modified_gmt":"2025-09-29T20:33:55","slug":"flex-manejo-de-flex-en-css","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/11\/16\/flex-manejo-de-flex-en-css\/","title":{"rendered":"Flex – Manejo de Flex en CSS"},"content":{"rendered":"\n

Modalidades de flex<\/mark><\/strong><\/p>\n\n\n\n

Tipo de elemento\u00a0 Descripci\u00f3n<\/strong><\/p>\n\n\n\n

display: inline-flex;  Establece un contenedor en l\u00ednea, similar a inline-block (ocupa solo el contenido).<\/p>\n\n\n\n

display: flex;  Establece un contenedor en bloque, similar a block (ocupa todo el ancho del padre).<\/p>\n\n\n\n

Direcci\u00f3n de los ejes<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Significado<\/strong><\/p>\n\n\n\n

flex-direction  row | row-reverse | column | column-reverse  Cambia la orientaci\u00f3n del eje principal.<\/p>\n\n\n\n

Contenedor flex multil\u00ednea<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Significado<\/strong><\/p>\n\n\n\n

flex-wrap  nowrap | wrap | wrap-reverse  Evita o permite el desbordamiento (multilinea).<\/p>\n\n\n\n

Atajo: Direcci\u00f3n de los ejes<\/strong><\/p>\n\n\n\n

flex-flow: <flex-direction> <flex-wrap>;<\/p>\n\n\n\n

Huecos (gaps)<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

row-gap  normal | SIZE  Espacio entre filas (s\u00f3lo funciona con flex-direction: column)<\/p>\n\n\n\n

column-gap  normal | SIZE  Espacio entre columnas (s\u00f3lo funciona con flex-direction: row)<\/p>\n\n\n\n

Atajo: Huecos<\/strong><\/p>\n\n\n\n

Propiedad  Valor  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

gap  0 | SIZE  Aplica el tama\u00f1o indicado para el hueco en ambos ejes.<\/p>\n\n\n\n

gap\u00a0 0 0 |\u00a0 SIZE SIZE\u00a0 Aplica los tama\u00f1os indicados para el hueco del eje X y el eje Y.<\/p>\n\n\n\n

Propiedades de alineaci\u00f3n<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Act\u00faa en eje<\/strong><\/p>\n\n\n\n

justify-content  flex-start | flex-end | center | space-between | space-around | space-evenly  eje principal<\/p>\n\n\n\n

align-items  flex-start | flex-end | center | stretch | baseline  eje secundario<\/p>\n\n\n\n

align-content  flex-start | flex-end | center | space-between | space-around | space-evenly | stretch  eje secundario<\/p>\n\n\n\n

Alineaciones espec\u00edficas<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valores  Act\u00faa en eje<\/strong><\/p>\n\n\n\n

align-self  auto | flex-start | flex-end | center | stretch | baseline  Secundario<\/p>\n\n\n\n

Atajo: Alineaciones<\/strong><\/p>\n\n\n\n

place-content: <align-content> <justify-content>;<\/p>\n\n\n\n

Orden de los elementos<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

order  0 | NUMBER  N\u00famero (peso) que indica el orden de aparici\u00f3n de los \u00edtems.<\/p>\n\n\n\n

Propiedades de flexibilidad<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

flex-basis  SIZE | content  Tama\u00f1o base de los \u00edtems antes de aplicar una variaci\u00f3n.<\/p>\n\n\n\n

flex-grow  0 | NUMBER  N\u00famero que indica el factor de crecimiento del \u00edtem (si no ocupa el 100% del padre).<\/p>\n\n\n\n

flex-shrink  1 | NUMBER  N\u00famero que indica el factor de decrecimiento del \u00edtem (si ocupa el 100% del padre).<\/p>\n\n\n\n

Atajo: La propiedad flex<\/mark><\/strong><\/p>\n\n\n\n

Propiedad  Valor  Descripci\u00f3n<\/strong><\/p>\n\n\n\n

flex (1 par\u00e1metro)  none | BASIS | GROW  Establece un tama\u00f1o base <\/strong>o un factor de crecimiento<\/strong>.<\/p>\n\n\n\n

flex (2 par\u00e1metros)  GROW SHRINK  Establece un factor de crecimiento<\/strong> y un factor de decrecimiento<\/strong>.<\/p>\n\n\n\n

flex (3 par\u00e1metros)  0 1 auto |GROW SHRINK BASIS  Establece el factor de crecimiento<\/strong> y decrecimiento<\/strong> y el tama\u00f1o base<\/strong>.<\/p>\n\n\n\n

\n