Qué son las Flexbox en diseño con CSS 3 y cómo utilizarlas
Qué son las Flexbox en diseño con CSS 3 y cómo utilizarlas
Las Flexbox es un modelo de cajas flexibles que se utilizan para diseñar webs en CSS 3 totalmente responsive. Esto significa que las dimensiones de las cajas que conforman el diseño de la página son elásticas y pueden expandirse o encogerse dependiendo del navegador y dispositivo desde el que el usuario visualice la web.
Se trata de una mejora considerable que evita emplear propiedades como el «float" o el «position" en conjunto con otras cuando lo que simplemente se desea es construir cajas flexibles y fluidas con distintos tamaños y que sean adaptables fácilmente a la resolución de cada dispositivo.
Algunos tutoriales interesantes
Para diseñar con FlexBox debes conocer programación avanzada en CSS3. Las webs con FlexBox se vertebran en torno a dos ejes: un Eje principal (main axis), que es la dirección en la cual se posicionan los elementos flexibles. Y tiene un Eje transversal, perpendicular al Eje principal. Ambos ejes tienen una serie de propiedades que controlan cómo se posiciona cada elemento flexible en relación a los demás.
Te recomendamos algunos de estos tutoriales online donde te explican bien cómo crear estas cajas flexibles en CSS 3:
- FlexBox: La caja flexible con CSS 3 de Emenia.
- Guía Definitiva de FlexBox: Flex Basis, Flex-Grow y Flex-Shrink de Escuela Digital
- Dando los primeros pasos con FlexBox de Desarrollo Libre
También te puede interesar…
– Las 10 claves del diseño web actual
– 10 aplicaciones gratuitas para diseñadores web
– 10 recursos gratis para diseñadores y desarrolladores web
– 10 diseños creativos para tiendas online diferentes
– 6 aplicaciones web para tu ecommerce que deberías conocer