Flexbox es la maravilla de las maravilla, cuanto dolor de cabeza dejaremos de tener, simplemente simplificación, y dinamismo en los proyectos, gracias por el curso, esta excelente, el mas preciso y claro hasta el momento en youtube, sigue asi, Felicidades!!
¡Que útiles estos trucos! se repasan muchos de los conceptos vistos en los videos anteriores, y resultan mágicos cuando se está en los primeros pasos del diseño web. Gracias prof. Álvaro porque son bastantes claros y con mucha pedagogía.
Haciendo el segundo ejercicio me di cuenta que se puede resumir aun más la parte responsiva solo cambiando la dirección de body, aside y main, pongo el código para que lo veas: @media screen and (max-width: 500px){ body { flex-direction: column; } aside, main { width: 100%; height: 50vh; flex-direction: column; } } Como siempre, excelentes tutoriales, se agradecen mucho.
Una vez más se le agradece desde Panamá por compartir sus conocimientos y en especial en este tema que es relativamente nuevo para muchos de nosotros gracias prof saludos, #no era penal #no era roja
Mil gracias por dedicarle tiempo a este tema me viene como anillo al dedo ya que estoy trabajando con el framework materializecss y este usa flexbox para centrar el contenido y también para el footer del que explicas en este video
En el ejemplo de centrado absoluto, si usamos position absolute en una flex-item, este sale del flujo del flex-container pero si no le damos top, bottom, left o right las propiedades de alineamiento igual se aplican al flex-item con pos. absoluto, le tenemos que ponder top:0 para que se quede arriba y no en el centro
Y por qué en su ejemplo funcionó sin la necesidad de ponerle un top: 0? Me acaba de pasar a mi, con solo poner position: absolute igual me aplicaba las propiedades de alineamiento.
primero aprovecho Alvaro para agradecerte nuevamente por tus maravillosos videos. tengo un lio y no he podido terminar el primer ejemplo; al momento de poner el h1 obviamente me sale junto al contenedor al estar dentro de un flex, pero al colocarle la propiedad de position:absolute; se termina la felicidad. -En mozilla el h1 queda dentro del contenedor -en chrome apesar de que se hubica en la parte superior me surgue otro problema al igual que en mozilla: al declarar el width lo toma desde el borde izquierdo del contenedor lo que por razones obvias termina por romper el layout... que podria estar generando este comportamiento?
Disculpe prof, con la inclusión y mejoramiento de flex box en los últimos años, ¿Se perfila flex box como remplazo absoluto en la creación de layouts para web o es simplemente un complemento más? ¿Tiene usted algún trabajo realizado que vaya desde la construcción del layout hasta la inclusión de imágenes, etc, neta y completamente con flex box ? Saludos y bendiciones
Álvaro, he copiado tu código al 100% para el ejemplo del Sticky footer... Sin embargo, cuando escribo la linea "flex-wrap: wrap", el footer, que debería quedar casi pegado al , se me va al centro de la página. Es como si al escribir el "wrap", los deja al 50% de la página... sabrás cómo ayudarme ??
como añaderian al main del ultimo ejemplo un article y un aside para que exista un header, main (article,aside) y un footer. osea un 1,2,1 no se si me entienden como que al lado apareza una seccionde comentarios
Muy Bueno tu vídeo Alvaro como siempre tu aporte es considerable no si me permites tu espacio para comentarte que existe un nuevo editor de código css, html, js, php y otros lenguajes y lo mejor de todo open source similar a Sublime Text claro lo mencionare si +Escuela Digital me autorice para poder usar este espacio
***** Con el permiso de alvaro lo mencionare se llama atom por lo que se tiene pocos días de lanzado aqui su web atom.io/ antes que nada agradecer a la comunidad open source por estos regalos que nos dan lo ya lo estoy usando y esta super
Hola, en el segundo ejercicio no se juntan los textos en su totalidad y si usé la propiedad alin-items: flex end; y start; respectivamente, algún aporte ??
Alvaro esta usando Sass que es un preprocesador de css por eso pone el & dentro de la etiqueta, si estas usando css puro debes poner .container:hover p { ...}
Una pregunta importante que he intentado resolver por mi mismo pero no consigo hacer, y no sé si alguien la resolvió. En el último truco "Sticky Footer" ¿por qué lo que esta entre medias "main" se queda en la página en el centro? No consigo que se pegue arriba (ni abajo). Simplemente se queda en el centro y ocupa un espacio pero en el centro. Entonces si lo que esta en el "main" no es muy grande se queda en el centro muy separado del header y del footer y se queda feo. ¿Alguna solución para eso? Espero que alguien me responda si lo sabe y así por fín pueda dormir tranquilo. Un saludo. Y gracias de antemano.
Buenas. disculpa pero a mi no me funciona el del centrado absoluto por completo no entiendo por que el titulo no se pone al inicio como en el video, el cuadro ed la foto y el texto si me sale a la perfeccion y entendi la cuestion pero cuando agrego el titulo y hago lo que haces en el video no me funciona y no entiendo ayuda pliz aqui esta el codepen para que vean como me sale.... no entiendo que pasa ni por que esta pasando x____x codepen.io/anon/pen/mJaPpZ
![Quando Rondo - Grow Up [Official Music Video]](http://i.ytimg.com/vi/8zFnCg3BO4Q/mqdefault.jpg)
Flexbox es la maravilla de las maravilla, cuanto dolor de cabeza dejaremos de tener, simplemente simplificación, y dinamismo en los proyectos, gracias por el curso, esta excelente, el mas preciso y claro hasta el momento en youtube, sigue asi, Felicidades!!
El footer que siempre soñé!... muy buenos trucos, hoy me llevo este genial footer y el de Box-shadow para hacer más bordes, Gracias Álbaro!
¡Que útiles estos trucos! se repasan muchos de los conceptos vistos en los videos anteriores, y resultan mágicos cuando se está en los primeros pasos del diseño web. Gracias prof. Álvaro porque son bastantes claros y con mucha pedagogía.
Lo del centro era justo lo que estaba buscando, gracias!
Haciendo el segundo ejercicio me di cuenta que se puede resumir aun más la parte responsiva solo cambiando la dirección de body, aside y main, pongo el código para que lo veas:
@media screen and (max-width: 500px){
body {
flex-direction: column;
}
aside, main {
width: 100%;
height: 50vh;
flex-direction: column;
}
}
Como siempre, excelentes tutoriales, se agradecen mucho.
Una vez más se le agradece desde Panamá por compartir sus conocimientos y en especial en este tema que es relativamente nuevo para muchos de nosotros gracias prof saludos,
#no era penal
#no era roja
gracias Álvaro muy buenos trucos.
Excelente, este tipo de videos me sirven mucho para practicar y repasar conceptos que aunque ya los vi, a veces se me olvidan en la práctica.
Excelente vídeo... Muchas gracias, sus explicaciones son muy claras.
Gracias, llevaba dias sin entender como funcionaba flexbox
Mil gracias por dedicarle tiempo a este tema me viene como anillo al dedo ya que estoy trabajando con el framework materializecss y este usa flexbox para centrar el contenido y también para el footer del que explicas en este video
Simplemente fantástico tus clases Alvaro, felicitaciones.
Eres el mejor, excelentes videos. Mil gracias por compartir.
En el ejemplo de centrado absoluto, si usamos position absolute en una flex-item, este sale del flujo del flex-container pero si no le damos top, bottom, left o right las propiedades de alineamiento igual se aplican al flex-item con pos. absoluto, le tenemos que ponder top:0 para que se quede arriba y no en el centro
Y por qué en su ejemplo funcionó sin la necesidad de ponerle un top: 0? Me acaba de pasar a mi, con solo poner position: absolute igual me aplicaba las propiedades de alineamiento.
Como funcionaría el primer ejemplo en Mobile
Excelente tutorial, me ayudaste mucho...muchas gracias :D
Gracias me sirvió mucho.
primero aprovecho Alvaro para agradecerte nuevamente por tus maravillosos videos.
tengo un lio y no he podido terminar el primer ejemplo;
al momento de poner el h1 obviamente me sale junto al contenedor al estar dentro de un flex, pero al colocarle la propiedad de position:absolute; se termina la felicidad.
-En mozilla el h1 queda dentro del contenedor
-en chrome apesar de que se hubica en la parte superior me surgue otro problema al igual que en mozilla: al declarar el width lo toma desde el borde izquierdo del contenedor lo que por razones obvias termina por romper el layout...
que podria estar generando este comportamiento?
Hola muchas gracias por la explicación esta genial
Como puedo vincular flex con boostrap?
Saludos
Disculpe prof, con la inclusión y mejoramiento de flex box en los últimos años, ¿Se perfila flex box como remplazo absoluto en la creación de layouts para web o es simplemente un complemento más? ¿Tiene usted algún trabajo realizado que vaya desde la construcción del layout hasta la inclusión de imágenes, etc, neta y completamente con flex box ?
Saludos y bendiciones
hermano muchas gracias saludos !!!
Este man es el capo de css compa
En este curso te enseñamos más de CSS Jesuch y lo mejor es que es gratis 🎁 ed.team/cursos/css
En este curso te enseñamos más de CSS Jesuch y lo mejor es que es gratis 🎁 ed.team/cursos/css
Este video me ha cautivado
Muchas gracias!, me solucionaste el problema, ya me estaba volviendo loco con el problema del footer.
Gracias, sos lo máximo
Alvaro Felipe sin barbita y gafas..!!! Esto es oro señores..jaja
porque en el html no pones los signos ? es un plugin?... y otra cosa... sos un genio, se nota que la tenes clara
+Daniel Suarez es jade (una forma de escribir html sin esos signos). En el canal hay un video sobre jade, buscalo (y)
Que plugin o programa se esta utilizando para cuando se guardan los cambios CSS automáticamente el navegador lo refresca?. Saludos. Muy buen video!
***** muchas gracias.
Excelente, gracias!!!
en el minuto 12:00 es válido si le cambio la dirección a column en mi body? así me evito el posicionamiento absoluto, o no es una buena forma?
Muy buen tutorial
Genial pero una pregunta como puede abreviar la sintaxis del html ¿es un plugins o script que le instaló al sublime text ?
emmet html
Super bueno el video me encanto
minuto 8.45, por lo que veo puedo utilizar esas tres propiedades para las propiedades de css, lo centro en el body de la pagina, y en el del div.
A quién mas le pareció que el (1) al costado del título del video, le pareció que era una notificación de youtube? XD
Álvaro, he copiado tu código al 100% para el ejemplo del Sticky footer... Sin embargo, cuando escribo la linea "flex-wrap: wrap", el footer, que debería quedar casi pegado al , se me va al centro de la página. Es como si al escribir el "wrap", los deja al 50% de la página... sabrás cómo ayudarme ??
profesionalmente es correcto usar flex para todo o casi todo?
como añaderian al main del ultimo ejemplo un article y un aside para que exista un header, main (article,aside) y un footer. osea un 1,2,1 no se si me entienden como que al lado apareza una seccionde comentarios
Muy Bueno tu vídeo Alvaro como siempre tu aporte es considerable no si me permites tu espacio para comentarte que existe un nuevo editor de código css, html, js, php y otros lenguajes y lo mejor de todo open source similar a Sublime Text claro lo mencionare si +Escuela Digital me autorice para poder usar este espacio
***** Con el permiso de alvaro lo mencionare se llama atom por lo que se tiene pocos días de lanzado aqui su web atom.io/ antes que nada agradecer a la comunidad open source por estos regalos que nos dan lo ya lo estoy usando y esta super
Hola, en el segundo ejercicio no se juntan los textos en su totalidad y si usé la propiedad alin-items: flex end; y start; respectivamente, algún aporte ??
Ame tu vídeo !!!!!
que software usas para compilar el CSS ?
Prepos
cuando le pongo position absolute al h1 se pone encima del contenedor no arriba del contenedor ???
Profe una pregunta : en el minuto 25:02, ¿por que min-height, y no max-height ? Ya que seria el alto maximo de la ventana no? O como es la lógica.
Por si le metes mas contenido
ok sanita gracias te lo agradezco
El Álvaro Felipe del 2021 párese que se comió al Álvaro Felipe 2015. Buen video
Alguién me puedría explicar por qué en el body se usó el flex-direction:row (default) y no el flex-direction:column?... Gracias
Impresionante!!!
estuvo buenísimo.
Gracias por este video! ;)
Al parecer esta demas el h1 {left: 0;} con text-align:center; ya tiene el efecto, por q lo usaste?
hace tiempo vi este tutorial y recorde que hablaba del footer que justo ahora tengo problemas para eso es raro que no me halla topado con esto antes
Eso ya lo e dicho (100vh) me recuerdas a los profes!!! buen video gracias!
muy bueno el truco con flexbox :-))
Genial!
en el primer ejemplo se activa el hover simplemente con mover el mouse fuera del container no dentro fala total
Gracias ^^
dividir la pantalla y puse un menu con la propiedad justify-content: flex-end no funciona que puedo hacer?
A Platzi no le gusta esto :v xD
+Luis Paredes css? eso existe? es comptaible? no creoh
Jajajajaja XD
Me gusto lo de cero estres
13:06 no era mejor utilizar grid y text-aling?
Si, pero recuerda que este video es del 2015 creo que para ese tiempo grid no estaba
amigo a mi no me funciona el " & " (cuando utilizas el hover) ya instale el jquare, que hise mal?
Alvaro esta usando Sass que es un preprocesador de css por eso pone el & dentro de la etiqueta, si estas usando css puro debes poner .container:hover p { ...}
Así conocí EDteam.
Una pregunta importante que he intentado resolver por mi mismo pero no consigo hacer, y no sé si alguien la resolvió. En el último truco "Sticky Footer" ¿por qué lo que esta entre medias "main" se queda en la página en el centro? No consigo que se pegue arriba (ni abajo). Simplemente se queda en el centro y ocupa un espacio pero en el centro. Entonces si lo que esta en el "main" no es muy grande se queda en el centro muy separado del header y del footer y se queda feo. ¿Alguna solución para eso? Espero que alguien me responda si lo sabe y así por fín pueda dormir tranquilo. Un saludo. Y gracias de antemano.
Me pasa lo mismo, ojalá EDTEAM nos pueda orientar al respecto...
Hola, le puse al titulo h1 position: absolute; y no queda arriba, queda en medio del div. ¿Por qué? Ayudaaaaa por favor, gracias
Hola. Ponle al top: 0, o cualquier otro valor y se posicionará arriba.
Alguien sabe cómo poner texto con centrado absoluto, pero debajo.
Buenas. disculpa pero a mi no me funciona el del centrado absoluto por completo no entiendo por que el titulo no se pone al inicio como en el video, el cuadro ed la foto y el texto si me sale a la perfeccion y entendi la cuestion pero cuando agrego el titulo y hago lo que haces en el video no me funciona y no entiendo ayuda pliz aqui esta el codepen para que vean como me sale.... no entiendo que pasa ni por que esta pasando x____x
codepen.io/anon/pen/mJaPpZ
Juan Carlos Moreno Guerra por cierto el error pasa o se desmaqueta es cuando le pongo el position:absolute al H1
AYUDAAAAAAAAAAAAAAAAAAAAAAA
el del footer no me funcione en internet elplorer 11 :(
joel arraez prueba con height:100vh en lugar de min-height
El like es por el align-self lo demás sí lo supe a punta de horas pegadas al css
Por que dice que vacio y tiene dos metas que yo no se ni que pedo ?!
ps bueno yo tuve q poner top 0 para q m salga sigan practicando -.-!
ala, que clase de brujera esta usando en el html??
groso mal !