Algunos creadores de proyectos para internet, por desconocimiento del modelo de cajas flexibles utilizan las cajas flotantes y las tablas para organizar los elementos, motivo por el cual obtienen resultados diferentes a los deseados. A fin de aplicar las cajas flexibles para la organización de elementos, diseñaremos páginas web el modelo Flex Box, según las recomendaciones oficiales del lenguaje CSS.

El lenguaje CSS ha sido desarrollado constantemente. En los inicios, los programadores utilizaban tablas para organizar los elementos, sin embargo, obtenían como resultado códigos complejos. Luego, el desarrollo de Float Box permitió definir las cajas como flotantes, con la finalidad de organizar con mayor facilidad los elementos. Posteriormente, el diseño de Flex Box permitió crear páginas web con elementos flexibles, adaptables a diferentes tipo de pantallas fácilmente. Más adelante, la creación de diseño Grid Box  permitió organizar los elementos bajo un formato de cuadrículas.

Una metolodología está fuera de ser mejor a otra en todas las situaciones. Por el contrario, en cada proyecto utilizamos el tipo de diseño más favorable o, mejor aún, unirlos para lograr una página web profesional.  

061-01_0809_ilu01. Tipos de diseño de páginas web

Las cajas flexibles se crean con dos elementos:

• El contenedor: sería cualquier etiqueta de HTML, sin embargo, las utilizadas con mayor frecuencia son las de seccionamiento como div, section, footer, entre otras.
• Elementos: serían todas las etiquetas ubicadas dentro del contenedor.

Es importante considerar que solo las etiquetas hijas dentro del contenedor pasan a ser flexibles. Es decir, si tenemos un div flexible, como hijo tiene la etiqueta p y dentro ésta otras etiquetas, solamente p se convierte en flexible.

061-01_0809_ilu02. Elementos para crear cajas flexibles

Para la creación del contendor de cajas flexibles agregamos a la etiqueta div la propiedad display y como valor flex, por lo tanto, toda etiqueta dentro de esta divisón pasa a ser flexible. En la siguiente ilustración apreciamos un ejemplo:

061-01_0809_ilu03. Creación de cajas flexibles

En el código HTML anterior observamos la etiqueta de imagen y las de párrafos dentro de div; por este motivo en la vista del usuario estos tres elementos de bloques se muestran uno a lado del otro.

Unas de las ventajas del uso de cajas flexibles es la posibilidad de variar los tamaños de la pantalla, y en cada una se muestra la misma división entre todos los elementos, como en la imagen siguiente:

061-01_0809_ilu04. Cajas flexibles con diferentes tamaños de pantallas

El orden por defecto para mostrar las cajas flexibles es de izquierda a derecha, sin embargo, en posible modificarlo mediante la propiedad flex-direction y con la especificación del valor row-reverse. Tal como se muestra en la siguiente imagen:

061-01_0809_ilu05. Modificación del orden a cajas flexibles

Existen otras especificaciones disponibles en las recomendaciones oficiales de CSS.

Keynotes

• El lenguaje CSS ha sido desarrollado constantemente. En los inicios, los programadores utilizaban tablas para organizar los elementos, sin embargo, obtenían como resultado códigos complejos.
• El desarrollo de Float Box permitió definir las cajas como flotantes, con la finalidad de organizar con mayor facilidad los elementos.
• El diseño de Flex Box permitió crear páginas web con elementos flexibles, adabtables a diferentes tipo de pantallas fácilmente.
• La creación de diseño Grid Box  permitió organizar los elementos bajo un formato de cuadrículas.
•  Las cajas flexibles se crean con dos elementos: El contenedor: puede ser cualquier etiqueta de HTML, sin embargo las utilizadas con mayor frecuencia son las de seccionamiento como div, section, footer, entre otras. Elementos: son todas las etiquetas ubicadas dentro del contenedor.
• El orden por defecto para mostrar las cajas flexibles es de izquierda a derecha, sin embargo, en posible modificarlo mediante la propiedad flex-direction y con la especificación del valor row-reverse.

A fin de aplicar eficientemente las cajas flexibles para la organización de los elementos, crea un diseño de página web con el modelo Flex Box, según las recomendaciones oficiales de lenguaje CSS.

Pasos a seguir:

• Crea un documento HTML o utiliza uno antiguo.
• Ubica el estándar oficial de CSS y lee las recomendaciones sobre cajas flexibles.
• Crea un código CSS con el modelo Flex Box.
• Ubica un experto en la materia mediante vKonntact y muéstrale el código creado más una explicación breve del mismo, a fin de tomar nota de sus sugerencias.

Sabrás que has tenido éxito cuando el código se ejecute sin problemas en el navegador web de tu preferencia.

Organiza el código, y compártelo en tu vProfile. Pide a tus compañeros sugerencias para optimizarlo.

Tiempo disponible: 3 horas.

A través del diseño de páginas web con el modelo Flex Box, según las recomendaciones oficiales del lenguaje CSS, unimos con eficiencia más de una técnica de diseño para obtener los resultados deseados. Asimismo, aplicamos correctamente las cajas flexibles para la organización de los elementos de proyectos para internet. Con paciencia y organización obtendremos unos diseños web pulcros y con calidad profesional.