Fullstack clase 6 - CSS 3 - flexbox.pptx
- 3. academianumen.co Flexbox Que es Flexbox: Flexbox es un sistema de elementos flexibles que llega con la idea de olvidar estos mecanismos y acostumbrarnos a una mecánica más potente, limpia y personalizable, en la que los elementos HTML se adaptan y colocan automáticamente y es más fácil personalizar los diseños. Está especialmente diseñado para crear, mediante CSS, estructuras de una sóla dimensión.
- 4. academianumen.co Flexbox Concepto: Para empezar a utilizar flexbox lo primero que debemos hacer es conocer algunos de los elementos básicos de este nuevo esquema, que son los siguientes:
- 5. academianumen.co Flexbox Contenedor: Es el elemento padre que tendrá en su interior cada uno de los ítems flexibles. Observa que al contrario que muchas otras estructuras CSS, por norma general, en Flex establecemos las propiedades al elemento padre. Eje principal: Los contenedores flexibles tendrán una orientación principal específica. Por defecto, es en horizontal (en fila). Eje secundario: De la misma forma, los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical, y viceversa. Ítem: Cada uno de los hijos flexibles que tendrá el contenedor en su interior.
- 6. academianumen.co Flexbox La propiedad Display: Esta define un contenedor flexible; en línea o en bloque según el valor dado. Permite un contexto flexible para todos sus hijos directos. Algunos de los posibles valores son: Flex , block , inline , inline- block , table , grid. Para Flexbox siempre aplicaremos la propiedad display: flex; al contenedor.
- 7. academianumen.co Flexbox Dirección de los ejes: Existen dos propiedades principales para manipular la dirección y comportamiento de los ítems a lo largo del eje principal del contenedor. Son las siguientes: Mediante la propiedad flex-direction podemos modificar la dirección del eje principal del contenedor para que se oriente en horizontal (por defecto) o en vertical. Además, también podemos incluir el sufijo -reverse para indicar que coloque los ítems en orden inverso.
- 8. academianumen.co Flexbox Flex-direction: Esto nos permite tener un control muy alto sobre el orden de los elementos en una página. Veamos la aplicación de estas propiedades sobre el ejemplo anterior, para modificar el flujo del eje principal del contenedor
- 9. academianumen.co Flexbox Flex-wrap: Por otro lado, existe otra propiedad llamada flex-wrap con la que podemos especificar el comportamiento del contenedor respecto a evitar que se desborde (nowrap, valor por defecto) o permitir que lo haga, en cuyo caso, estaríamos hablando de un contenedor flexbox multilinea.
- 10. academianumen.co Flexbox Flex-flow: Existe una propiedad de atajo (short- hand) llamada flex-flow, con la que podemos resumir los valores de las propiedades flex-direction y flex-wrap, especificándolas en una sola propiedad y ahorrándonos utilizar las propiedades concretas
- 11. academianumen.co Flexbox Propiedades de alineación: Ahora que tenemos un control básico del contenedor de estos ítems flexibles, necesitamos conocer las propiedades existentes dentro de flexbox para disponer los ítems dependiendo de nuestro objetivo. Vamos a echar un vistazo a 4 propiedades interesantes para ello, la primera de ellas actua en el eje principal, mientras que el resto en el eje secundario
- 12. academianumen.co Flexbox Propiedades de alineación: De esta pequeña lista, hay que centrarse en primer lugar en la primera y la tercera propiedad, que son las más importantes (las otras dos son casos particulares que explicaremos más adelante): justify-content: Se utiliza para alinear los ítems del eje principal (por defecto, el horizontal). align-items: Usada para alinear los ítems del eje secundario (por defecto, el vertical).
- 13. academianumen.co Flexbox Propiedades de alineación: La primera propiedad, justify-content, sirve para colocar los ítems de un contenedor mediante una disposición concreta a lo largo del eje principal:
- 15. academianumen.co Flexbox Propiedades de alineación (align-ítems): La otra propiedad importante de este apartado es align-items, que se encarga de alinear los ítems en el eje secundario del contenedor. Hay que tener cuidado de no confundir align-content con align-items, puesto que el primero actúa sobre cada una de las líneas de un contenedor multilinea (no tiene efecto sobre contenedores de una sola línea), mientras que align-items lo hace sobre la línea actual. Los valores que puede tomar son los siguientes:
- 16. academianumen.co Flexbox Propiedades de alineación (align-self): Por otro lado, la propiedad align-self actúa exactamente igual que align-items, sin embargo es la primera propiedad de flexbox que vemos que se utiliza sobre un ítem hijo específico y no sobre el elemento contenedor. Salvo por este detalle, funciona exactamente igual que align-items. Gracias a ese detalle, align-self nos permite cambiar el comportamiento de align- items y sobreescribirlo con comportamientos específicos para ítems concretos que no queremos que se comporten igual que el resto. La propiedad puede tomar los siguientes valores:
- 17. academianumen.co Flexbox Propiedades de alineación (align-self):
- 18. academianumen.co Flexbox Propiedades de alineación (align-content): Podemos controlar el alineamiento de los elementos de una caja flexible ( flexbox ) a lo largo de su eje principal con justify-content o a lo largo de su eje transversal con align-items. Pero, a veces, los elementos de la caja flex pueden ocupar varias líneas. En este caso podemos controlar el alineamiento de los elementos flex utilizando la propiedad align-content.
- 19. academianumen.co Flexbox Propiedades de alineación (align-content):
- 20. academianumen.co Flexbox Espacios, espacio entre filas, espacio entre columnas La propiedad gap se utiliza para generar espacios entre filas y columnas
- 21. academianumen.co Flexbox Espacios, espacio entre filas(row-gap: valor), espacio entre columnas(column-gap: valor)
- 22. academianumen.co Flexbox Flex-basis La propiedad de CSS flex-basis especifíca la base flexible, la cual es el tamaño inicial de un elemento flexible. Ésta propiedad determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma usando box-sizing
- 23. academianumen.co Flexbox Flex-grow Esta define la capacidad de un artículo flexible para crecer si es necesario. Acepta un valor sin unidades que sirve como proporción. Dicta la cantidad de espacio disponible dentro del contenedor flexible que debe ocupar el artículo. Si todos los elementos se han establecido en 1, el espacio restante del contenedor se distribuirá por igual a todos los hijos. Si uno de los hijos tiene un valor de 2, el espacio restante ocuparía el doble de espacio que los demás (o lo intentará, al menos).
- 25. academianumen.co Flexbox Flex-shrink La propiedad CSS flex-shrink especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número flex-shrink , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.