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.
MisiónA 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.
CierreA 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.
