La propiedad flex-basis de Flexbox puede ser usada para determinar el tamaño inicial de un elemento flexible. Pero, ¿por qué esto es importante? Debes saber que determinar el tamaño de un elemento HTML con las unidades de medida de CSS no siempre es una tarea fácil. Aunque con el tiempo nos podemos volver unos expertos de las medidas, la realidad es que casi siempre necesitamos del intento y error para insertar el valor exacto que nos ofrezca el tamaño que queremos. Por ello, muchos diseñadores usan tamaños relativos o flexibles. Este tipo de diseño hace que los elementos no dependan de un valor exacto, sino de la relación con los demás elementos o con su propio contenido.
¿Cómo funciona la propiedad flex-basis de Flexbox?
La propiedad flex-basis de Flexbox nos ayuda a determinar el tamaño inicial de un elemento al que le aplicaremos las propiedades de flex-grow y/o flex-shrink. Estas dos propiedades nos permiten hacer que un elemento crezca para ocupar el espacio sobrante de su contenedor o se encoja para permitir que los otros elementos quepan cuando el contenedor es más pequeño. Normalmente, el crecimiento o contracción toma como base un tamaño asignado con la propiedad width o height. Sin embargo, la propiedad flex-basis de Flexbox nos ayuda a definir el tamaño inicial de nuestro elemento flexible teniendo en cuenta otras características.
Al insertar un número en la propiedad flex-basis de Flexbox, estamos definiendo el largo del elemento en el eje principal determinado con flex-direction. Aun así, también podemos insertar las siguientes opciones o keywords:
- auto: es la opción por defecto en flex-basis y determina que el navegador debe utilizar los valores de tamaño width o height para generar el tamaño. El navegador buscará el valor que afecte el tamaño del elemento en el eje principal, (width si es row, height si es column) .
- content: determina el tamaño teniendo en cuenta el contenido del elemento. Si tenemos un texto dentro del elemento, este acomodará su tamaño en el eje principal a este texto.
¿Cómo agrupo las propiedades de tamaño flexible?
¡Ya sabes cómo utilizar la propiedad flex-basis de Flexbox! También sabemos que la podemos utilizar junto a las propiedades flex-grow y flex-shrink para crear un elemento HTML que adapte su tamaño a las necesidades del espacio y de su contenido. Pero, si es tan común utilizar estas propiedades juntas, ¿tenemos que insertar cada valor individualmente cada vez que queramos crear un elemento HTML flexible? La respuesta con Flexbox es clara: ¡no! Flexbox entró al mundo del desarrollo web para hacer del diseño más fácil y por esto ha creado la propiedad flex.
Paso 1: Entender la propiedad flex-basis de Flexbox
- Uso inicial: flex-basis es parte de Flexbox y se utiliza para definir el tamaño base de un elemento antes de que se distribuya el espacio restante.
Paso 2: Combinar flex-basis con flex-grow y flex-shrink
- Propósito combinado: Estas propiedades se usan juntas para permitir que un elemento HTML adapte su tamaño según las necesidades del espacio disponible y su contenido.
Paso 3: Simplificar con la propiedad flex
- Introducción de flex: Esta propiedad es una abreviatura que combina flex-grow, flex-shrink, y flex-basis.
- Cómo funciona: Al utilizar flex, puedes asignar valores a estas tres propiedades en una sola declaración.
- Primer valor: Corresponde a flex-grow.
- Segundo valor: Corresponde a flex-shrink.
- Tercer valor: Corresponde a flex-basis.
- Valores opcionales: Si solo proporcionas el primer número, Flexbox automáticamente asignará valores inteligentes a las otras dos propiedades, haciendo opcionales los valores para flex-shrink y flex-basis.
Paso 4: Recomendaciones de uso
- Uso recomendado: Se aconseja utilizar la propiedad flex en vez de insertar individualmente cada propiedad, porque esta definirá los valores que no insertes de manera inteligente y automática.
- Ventajas: Usar flex ayuda a que los valores no especificados se ajusten automáticamente de manera óptima y reduce la necesidad de declaraciones múltiples.
Al utilizar flex, simplificas el proceso de ajuste del tamaño de los elementos en tus diseños web, haciendo que el código sea más limpio y fácil de mantener.
Ahora que sabes cómo utilizar la propiedad flex-basis de Flexbox para crear elementos flexibles junto a flex-grow y flex-shrink, ¿quieres poner estas propiedades en práctica y seguir aprendiendo? Si tu respuesta es sí, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp. Allí, además de seguir aprendiendo sobre el mundo del desarrollo web y sus lenguajes de programación, crearás y diseñarás tu propia página web con ayuda de nuestros profesores. Al final, ¡serás un experto en desarrollo web! ¡No dudes en apuntarte!
