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 de 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. En este post te enseñaremos cómo utilizar la propiedad flex-basis de Flexbox para determinar el tamaño inicial de un elemento flexible.
¿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.
Flex es la abreviatura de las propiedades flex-grow, flex-shrink y flex-basis. Al igual que flex-flow para las propiedades flex-direction y flex-wrap, la propiedad flex nos permite unir en una sola etiqueta estas tres propiedades para modificar el tamaño de nuestros elementos. Entonces, solo necesitaremos insertar los tres valores que queramos, uno para cada propiedad. El primer número será para flex-grow, el segundo para flex-shrink y el tercero para la propiedad flex-basis de Flexbox. Cualquier valor que pongamos en nuestro primer número definirá automáticamente las dos siguientes propiedades, por lo que darle un valor a las últimas dos es opcional.
Te recomendamos utilizar la abreviatura flex en vez de insertar individualmente cada propiedad, porque esta definirá los valores que no insertes de manera inteligente y automática.
¿Te animas a seguir aprendiendo?
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!
