Diseño responsivo con cajas flexibles CSS3

Name: Diseño responsivo con cajas flexibles CSS3
Rating: 4.4 (111 reviews)

Conoce la poderosa herramienta de las cajas flexibles o flex-box para hacer páginas responsivas

Highest Rated

Created byFrancisco Javier Arce Anguiano

Last updated 5/2022

Spanish

What you'll learn

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

Course content

6 sections • 53 lectures • 7h 33m total length

Bienvenida al curso Crear páginas responsivas con flow-box de CSS38: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.
Introducción a las cajas flexibles de CSS310:17
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.
La propiedad display en el manejo de las cajas flexibles con CSS37:02
Por medio de la propiedad display y su valor flex, podemos hacer flexible las cajas contenidas dentro de la misma.
Flex-direction: cambiar la dirección de las cajas flexibles6:22
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.
Justify-content: justificar las cajas flexibles en el eje principal7:35
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.
Align-items: alinear los elementos flexibles en el eje cruzado o complementario15:28
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.
Align-self: modificar la alineación individual en el eje transversal7:15
Flex-wrap: crear diferentes líneas10:24
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.
Align-content: Modificar los espacios entre las líneas (renglones) de los ítems9:58
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.
Flex-flow: controlar los ejes9:30
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.

Cambiar el orden de los ítems de la caja flexible10:31
La propiedad order determina el orden del elemento flexible dentro del contenedor. Se pueden tener valores negativos.

.primero {

-webkit-order: -1;

order: -1;

}
El comportamiento de la propiedad margin en las cajas flexibles8:47
Ajuste de margen margin: auto; absorberá espacio extra. Puede ser utilizado para empujar los elemento flexibles en diferentes posiciones.
La propiedad flex-grow para el ancho proporcional de los items, primera parte10:51
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.
La propiedad flex-grow para el ancho proporcional de los items, segunda parte7:46
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.
La propiedad flex-shrink para reducir las dimensiones del ítem flexible14:05
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-
La propiedad flex-basis para establecer las dimensiones del ítem flexible12:29
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-
La propiedad flex para cambiar los ítems de un contenedor flexible12:50
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-

Crea la estructura flexible con flex-box9:09
Con este video iniciamos la construcción de una página resposnsiva con la caja flexible.
Hacer una página responsiva con flex-box de CSS310:02
En este video añadiremos los media querys para hacer la página responsiva y añadiremos contenidos y estilos.
Crear una segunda página flexible con flex-box10:10
En este video iniciamos una segunda página responsiva con cajas flexibles o flex-box.
Agregar contenido a la página realizada con flex-box7:00
En este video añadiremos los contenidos y sus estilos correspondientes, antes de hacer a nuestra página responsiva.
Hacer la pagina responsiva con los media-query9:47
En este video, corregiremos algunos problemas y añadiremos los media-query para convertir la página en responsiva.
Galería flexible utilizando flex-box de CSS36:22
En este video iniciaremos una galería responsiva muy sencilla por medio de las cajas flexibles o flex-box de CSS3.
Galeria flexible utilizando flex-box, segunda parte5:52
En este video terminaremos la sencilla galería de fotos por medio de las cajas flexibles o flex-box de CSS3
Hacer una animación con cajas flexibles o flex-box de CSS37:36
En este video haremos tres secciones flexibles y las animaremos por medío de una transición de CSS3.
Crear un menú responsivo con cajas flexibles o flex-box con CSS39: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.
Crear un menú responsivo desde una lista no ordenada14:00
Por medio de las cajas flexibles (y un poco de @media-queries) podemos realizar modelos responsivos.
Crear un menú responsivo con iconos con display: flex;10:05
Por medio de las cajas flexibles (y un poco de @media-queries) podemos realizar modelos responsivos y cajas flexibles embebidas.
Crear un menú responsivo con iconos con display: flex; segunda parte9:14
Por medio de las cajas flexibles (y un poco de @media-queries) podemos realizar modelos responsivos y cajas flexibles embebidas.

Escribir los contenidos en el archivo HTML12:04
En la mayoría de los sistemas necesitamos una pantalla de inicio.
Podemos incluir:
Una barra de navegación
Una imagen principal
Un pie de página con un submenú y redes sociales
Escribir los estilos en cascada para la barra de navegación14:03
Después de las reglas de estilo de la “normalización”, vamos a crear los estilos de nuestra barra de navegación.
Escribir los estilos en cascada para el banner11:22
Escribiremos los estilos en cascada para el banner, nuestro lema y el botón principal.
Modificar los estilos en cascada para el pie de página6:03
El pie de página consistirá en varias cajas flexibles.
El menú secundario del piede página11:36
El submenú lo manejaremos como otra caja flexible dentro de la caja flexible del pie de página.
Las líneas de ubicación y extras en el pie de página11:10
Las líneas de ubicación y extras en el pie de página
Aplicar los @media-queries a la página12:58
Aplicar los @media-queries a la página
Uso de variables para los colores6:28
Por medio de la pseudo clase :root podemos definir variables para ser usadas en los estilos en cascada.
La variable debe ser definida con doble signo de menos antes del nombre.
La variable debe ser utilizada con la función var().

Revisión del proyecto terminado de página inicial y verificarlo responsivo6:15
Podemos hacer una página responsiva con las cajas flexibles y los media queries.
Cada una de las secciones, a su vez, tendrá una definición de cajas flexibles.
Crear el contenido HTML y los estilos en cascada básicos11:26
Por medio de las cajas flexibles (y un poco de @media-queries) podemos realizar modelos responsivos.
Crear la estructura básica de la página.
Crear el encabezado de la página de inicio con flex-box8:28
Podemos centrar el título convertiéndolo en cajas flexibles.
Creación del contenido de los cursos8:59
Podemos centrar el título convertiéndolo en cajas flexibles.
Manejo del contenido con las cajas flexibles7:07
Creamos el contenido de los “cursos”.
Crear una sección del curso más reciente7:29
Creamos el contenido de los “cursos”.
Crear una sección para las descargas7:05
Podemos crear una nueva sección para descargar un producto en la sección principal.
Convertir la sección de descargas con cajas flexibles5:59
Podemos crear una nueva sección para descargar un producto en la sección principal.
Crear una galería con cajas flexibles6:29
Podemos crear la sección lateral de nuestros productos.
Crear la barra lateral con cajas flexibles7:08
Podemos crear la sección lateral de nuestros productos.
Crear el pie de página y el menú principal8:11
Podemos crear el Menú principal y pie de página para concluir nuestra página.

Ejercicios del curso Introducción a Crear páginas responsivas con flex-box0:04
Despedida del curso Crear páginas responsivas3:19
Apuntes: Conceptos generales0:03
En esta sección encontrarás los apuntes de apoyo del curso en formato PDF
Apuntes: Propiedades a las cajas flexibles0:03
En esta sección encontrarás los apuntes de apoyo del curso en formato PDF
Apuntes: Consideraciones de los elementos flexibles0:03
En esta sección encontrarás los apuntes de apoyo del curso en formato PDF

Requirements

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

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.

Who this course is for:

Diseñadores web
Desarrolladores web

Diseño responsivo con cajas flexibles CSS3

What you'll learn

Explore related topics

Course content

Introducción a las Cajas Flexibles o flex-box de CSS310 lectures • 1hr 33min

Propiedades para los ítems flexibles7 lectures • 1hr 17min

Crear páginas responsivas con flex-box de CSS312 lectures • 1hr 49min

Crear una pantalla de inicio (landing page)8 lectures • 1hr 26min

Crear una página responsiva con flex-box11 lectures • 1hr 25min

A manera de conclusión5 lectures • 4min

Requirements

Description

Who this course is for: