Qué son las Flexbox en diseño con CSS 3 y cómo utilizarlas

comunicacion/ / General/ 0 comments

flexbox
Desde que CSS 3 incorporó Flexbox, la maquetación web de contenidos ya no es lo mismo. Esta nueva forma totalmente personalizable de ordenar y estructurar elementos para lograr diseños increíbles ya está en marcha y tú también puedes aprender cómo.

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.

flexbox-diagrama-css Fuente: www.emenia.es

Te recomendamos algunos de estos tutoriales online donde te explican bien cómo crear estas cajas flexibles en CSS 3:

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 

Share

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*