Diseño responsivo con cajas flexibles CSS3

Conoce la poderosa herramienta de las cajas flexibles o flex-box para hacer páginas responsivas
4.3 (10 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
170 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 30
  • Length 2.5 hours
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2015 Spanish

Course Description

En este curso aprenderás a desarrollar páginas responsivas por medio de la poderosa herramienta de las cajas flexibles o flex-box. Nos basaremos en la especificación más reciente de la W3C de 2014 de las "flex-box". Analizaremos desde las bases de este esquema, que nos permitirá hacer formatos o layouts, así como la forma de alinearlos vertical u horizontalmente, centrarlas, cambiar el orden de las cajas internas o ítems flexibles, así como las propiedades para "estirarlas", rotarlas y adaptarse de forma natual, las cajas internas al contenedor flexible.

Haremos ejemplos de páginas responsivas iniciando desde cero, hasta llenarlas de contenido. Realizaremos una galería responsiva con diferentes imágenes, que se adaptarán al tamaño del dispositivo, adaptándose tanto a tabletas como a teléfonos inteligentes. También haremos un ejemplo de cómo animar a las cajas flexibles por medio de las propiedades de transición de los estilos en cascada nivel tres. Por último codificaremos un menú horizontal con cajas flexibles, que cambiará su orientación a vertical cuando se visualice en pantallas pequeñas, como la de los teléfonos, donde es complicado los menús largos.

Para que puedas aprovechar este curso, es necesario que tengas conocimientos mínimos de HTML y CSS. También es deseable que conozcas HTML5 y CSS3, aunque no es indispensable.

Para tomar este curso necesitas un editor de código como SublimeText. Brackets, Aptana o Dreamweaver y un navegador moderno, así como muchas ganas de aprender.


What are the requirements?

  • Conocimientos medios de HTML y CSS
  • Deseable tener conocimientos básicos de HTML5 y CSS3

What am I going to get from this course?

  • Crear una página a base de las cajas flexibles
  • Cambiar la dirección de las cajas flexibles de horizontal a vertical y el orden de las cajas internas
  • Justificar y alinear las cajas internas
  • Cambiar el orden de las cajas internas individuales
  • Cambiar la proporción del ancho y del largo de los items flexibles
  • Crear páginas responsivas con cajas flexibles
  • Aplicar transiciones en las cajas flexibles
  • Crear una galería a partir de cajas flexibles
  • Crear un menú responsivo

What is the target audience?

  • Diseñadores web
  • Desarrolladores web

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

08:50

El objetivo de este curso es que aprendas a utilizar las cajas flexibles (o flex-box) de los estilos en cascada nivel 3 para realizar páginas responsivas. Para que puedas aprovechar este curso es recomendable que tengas conocimientos medios de HTML y CSS, así como es deseable que poseas conocimientos básicos de HTML 5 y CSS3.

Section 1: Introducción a las Cajas Flexibles o flex-box de CSS3
07:21

Por medio de la nueva especificación de las cajas flexibles de CSS3 (2014) nos será muy sencillo realizar páginas responsivas y cualquier diseño de páginas web, tanto para computadoras de escritorio, como para dispositivos móviles.

05:43

Por medio de la propiedad display y su valor flex, podemos hacer flexible las cajas contenidas dentro de la misma.

03:33

Por medio de la propiedad direction y de flex-direction podremos modificar la dirección de los ítems flexibles dentro del contenedor. La dirección podrá ser vertical y horizontal e incluso inversas.

04:12

Con la propiedad justify-content justificamos los elementos flexibles si es que estos no abarcan todo el espacio del eje principal.

Los posibles valores son::

  • flex-start - Valor por omisión. Alinea al inicio del eje principal.
  • flex-end - Los items son alineados al final del contenedor flexible.
  • center - Los items son alineados con respecto al centro del contenedor.
  • space-between - Los items son alineados en el eje pegado a sus costados.

space-around - Los items son colocados proporcionalmente.

04:17

Con la propiedad aline-items podemos alinear en el eje complementario. Los valores son:

  • stretch - Valor por omisión. Estira el item para abarcar el contenedor.
  • flex-start - Los items son colocados al inicio del contenedor.
  • flex-end - Los items son colocados al final del contenedor.
  • center - Los items son centrados en el eje complementario.
  • baseline - Los items son colocados en la parte superior del contenedor.
04:01

La propiedad flex-wrap especifica si los elementos flexibles deben “envolverse” o no, si no hay suficiente espacio para ellos en el eje principal.

Los valores posibles son los siguientes:

  • nowrap - Valor por defecto. Los elementos flexibles no se envuelven.
  • wrap - Los elementos flexibles se envuelven si es necesario.
  • wrap-reverse - Los elementos flexibles se envuelven, si es necesario, en orden inverso.
06:16

La propiedad align-content modifica la propiedad flex-wrap. Es similar a la propiedad align-items, pero en vez de alinear los items, alinea las lineas (renglones) flexibles.

  • stretch - Valor por defecto. Líneas estiran para ocupar el espacio restante.
  • flex-start - Líneas están llenas hacia el inicio del contenedor flexible.
  • flex-end - Líneas están llenas hacia el final del contenedor flexible.
  • center - Líneas de centro se embalan hacia el centro del contenedor.
03:59

La propiedad flex-flow resume a las propiedades flex-direction y flex-wrap.

Ambas propiedades definen al eje principal y al eje complementario o cruzado.

Su valor por omisión son: row y nowrap.

flex-direction: row, row-reverse, column, column-reverse.

flex-wrap: nowrap, wrap, wrap-reverse.

Section 2: Propiedades para los ítems flexibles
03:59

La propiedad order determina el orden del elemento flexible dentro del contenedor. Se pueden tener valores negativos.

.primero {

-webkit-order: -1;

order: -1;

}

04:11

Ajuste de margen margin: auto; absorberá espacio extra. Puede ser utilizado para empujar los elemento flexibles en diferentes posiciones.

03:49

La propiedad align-self anula la propiedad del contenedor flexible align-items para ese elemento. Tiene los mismos valores posibles que la propiedad align-items.

  • stretch - Valor por omisión. Estira el item para abarcar el contenedor.
  • flex-start - Los items son colocados al inicio del contenedor.
  • flex-end - Los items son colocados al final del contenedor.
  • center - Los items son centrados en el eje complementario.
  • baseline - Los items son colocados en la parte superior del contenedor.
03:41

La propiedad flex-grow especifica la longitud del elemento flexible, en relación con el resto de los elementos en el interior del mismo contenedor.

.item1 { -webkit-flex-grow: 2; flex-grow: 2;}

.item2 { -webkit-flex-grow: 1; flex-grow: 1;}

.item3 {-webkit-flex:-grow 1; flex-grow:1;}


En el siguiente ejemplo, el primer elemento de la flexión consumirá 2/4 del espacio libre, y los otros dos elementos flexibles consumirá 1/4 del espacio libre de cada uno.

02:44

La propiedad flex-shrink especifica cómo el item se reducirá o encogerá con respecto al resto de los elementos flexibles dentro del mismo contenedor.

No acepta números negativos.

No funciona en IE10-

Para Safari 6.1- necesitamos el prefijo -webkit-

02:39

La propiedad flex-basis especifica el valor inicial en el eje principal (por lo general es el ancho (width) pero depende de la dirección de los ejes.

Si el elemento no es flexible, este comando no afecta en nada.

Acepta el valor de “auto”.

No funciona en IE10-

Para Safari 6.1- necesitamos el prefijo -webkit-

02:52

La propiedad flex es la forma abreviada de escribir los comandos flex-grow, flex-shrink y flex-basis. Los dos últimos parámetros son opcionales..

Es recomendable que utilice el comando corto. Este comando deshabilita a los demás.

El valor por default es: 1 1 auto

El valor none equivale a: 0 0 auto

Es soportado por IE10 con el prefijo -ms-

Section 3: Crear páginas responsivas con flex-box de CSS3
09:09

Con este video iniciamos la construcción de una página resposnsiva con la caja flexible.

10:02

En este video añadiremos los media querys para hacer la página responsiva y añadiremos contenidos y estilos.

10:10

En este video iniciamos una segunda página responsiva con cajas flexibles o flex-box.

07:00

En este video añadiremos los contenidos y sus estilos correspondientes, antes de hacer a nuestra página responsiva.

09:47

En este video, corregiremos algunos problemas y añadiremos los media-query para convertir la página en responsiva.

06:22

En este video iniciaremos una galería responsiva muy sencilla por medio de las cajas flexibles o flex-box de CSS3.

05:52

En este video terminaremos la sencilla galería de fotos por medio de las cajas flexibles o flex-box de CSS3

07:36

En este video haremos tres secciones flexibles y las animaremos por medío de una transición de CSS3.

09:55

Por regla general, los menús horizontales son complicados de manejar en un dispositivo pequeño, así que necesitamos convertirlo en vertical. Por medio de las cajas flexibles, nos será muy sencillo efectuar este cambio.

Section 4: A manera de conclusión
Ejercicios del curso Introducción a Crear páginas responsivas con flex-box
Article
Despedida del curso Crear páginas responsivas
03:19
Article

En esta sección encontrarás los apuntes de apoyo del curso en formato PDF

Article

En esta sección encontrarás los apuntes de apoyo del curso en formato PDF

Article

En esta sección encontrarás los apuntes de apoyo del curso en formato PDF

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Francisco Javier Arce Anguiano, Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.

Ready to start learning?
Take This Course