Trucos con Flexbox (1) - Centrado absoluto, Dividir pantalla, Sticky footer

[@yosoynch]

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!

[@jimenakatu1178]

Lo del centro era justo lo que estaba buscando, gracias!

[@helpdesk4410]

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!!

[@maythemendoza7176]

¡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.

[@christianlergier3872]

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

[@Ivan-bk4oc]

gracias Álvaro muy buenos trucos.

[@josehernandezmontiel7228]

Gracias, llevaba dias sin entender como funcionaba flexbox

[@GhostlyTutoriales]

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.

[@mariofernandolopezlondono3889]

Eres el mejor, excelentes videos. Mil gracias por compartir.

[@moisesmagno]

Simplemente fantástico tus clases Alvaro, felicitaciones.

[@FabioJara]

Excelente vídeo... Muchas gracias, sus explicaciones son muy claras.

[@HiramGuerrero]

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.

[@leninalberto]

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

[@dacadev]

Como funcionaría el primer ejemplo en Mobile Excelente tutorial, me ayudaste mucho...muchas gracias :D

[@leonardoescalante4648]

Gracias me sirvió mucho.

[@mauricz1473]

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

[@GhostlyTutoriales]

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.

[@Catuchee]

hermano muchas gracias saludos !!!

[@AsesinoMix]

Muchas gracias!, me solucionaste el problema, ya me estaba volviendo loco con el problema del footer.

[@amospal441]

Este video me ha cautivado

[@jesuv5875]

Este man es el capo de css compa

[@EDteam]

En este curso te enseñamos más de CSS Jesuch y lo mejor es que es gratis 🎁 ed.team/cursos/css

[@EDteam]

En este curso te enseñamos más de CSS Jesuch y lo mejor es que es gratis 🎁 ed.team/cursos/css

[@MrRicardoLlanos]

Gracias, sos lo máximo

[@alexaaguilarcarrillo2171]

Super bueno el video me encanto

[@teveoenlaweb]

Hola muchas gracias por la explicación esta genial Como puedo vincular flex con boostrap? Saludos

[@emanuelvega6221]

Alvaro Felipe sin barbita y gafas..!!! Esto es oro señores..jaja

[@maple-86]

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

[@EroSenninZZ]

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?

[@luisfernandoescobar2131]

Excelente, gracias!!!

[@jairobarreraosorio]

Eso ya lo e dicho (100vh) me recuerdas a los profes!!! buen video gracias!

[@WhitmanttwnewLopez]

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?

[@irk3n886]

Gracias por este video! ;)

[@stefano_dev]

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

[@christianlergier3872]

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

[@fernandoalmazan5317]

Impresionante!!!

[@cesarpreciado4737]

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.

[@oksanita658]

Por si le metes mas contenido

[@cesarpreciado4737]

ok sanita gracias te lo agradezco

[@JCCLBLACK]

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

[@JCCLBLACK]

***** 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

[@bulmavegeta23]

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.

[@oscarolivares2606]

Muy buen tutorial

[@DanielSuarez-si4fu]

porque en el html no pones los signos ? es un plugin?... y otra cosa... sos un genio, se nota que la tenes clara

[@EDteam]

+Daniel Suarez es jade (una forma de escribir html sin esos signos). En el canal hay un video sobre jade, buscalo (y)

[@albertcito]

Ame tu vídeo !!!!! que software usas para compilar el CSS ?

[@hugonelsonlopezhernandez7216]

Prepos

[@Adolphe9]

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

[@cervatestorresulisesemmanu6066]

Que plugin o programa se esta utilizando para cuando se guardan los cambios CSS automáticamente el navegador lo refresca?. Saludos. Muy buen video!

[@cervatestorresulisesemmanu6066]

***** muchas gracias.

[@guille4644]

El Álvaro Felipe del 2021 párese que se comió al Álvaro Felipe 2015. Buen video

[@HenryLeonardoPulidoBenedetti]

Genial pero una pregunta como puede abreviar la sintaxis del html ¿es un plugins o script que le instaló al sublime text ?

[@augustosilva33]

emmet html

[@zetzu12369]

Á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 ??

[@dialmais]

muy bueno el truco con flexbox :-))

[@joelventura76]

cuando le pongo position absolute al h1 se pone encima del contenedor no arriba del contenedor ???

[@vercris]

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

[@carlosdoken3751]

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 ??

[@bulmavegeta23]

estuvo buenísimo.

[@horimiyarawstyle]

profesionalmente es correcto usar flex para todo o casi todo?

[@irk3n886]

Al parecer esta demas el h1 {left: 0;} con text-align:center; ya tiene el efecto, por q lo usaste?

[@suaz94]

A Platzi no le gusta esto :v xD

[@BonensProject]

+Luis Paredes css? eso existe? es comptaible? no creoh

[@JoseNoIP]

Jajajajaja XD

[@jeancuervo8855]

en el primer ejemplo se activa el hover simplemente con mover el mouse fuera del container no dentro fala total

[@Adrian-ux9xm]

13:06 no era mejor utilizar grid y text-aling?

[@jesuv5875]

Si, pero recuerda que este video es del 2015 creo que para ese tiempo grid no estaba

[@geovanigarciagaona7302]

Genial!

[@davideq08]

dividir la pantalla y puse un menu con la propiedad justify-content: flex-end no funciona que puedo hacer?

[@MiguelBonifaz]

Gracias ^^

[@cesarcapralihuise501]

amigo a mi no me funciona el " & " (cuando utilizas el hover) ya instale el jquare, que hise mal?

[@Paul-zg8fn]

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 { ...}

[@nifares8744]

Así conocí EDteam.

[@10crack8]

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.

[@zetzu12369]

Me pasa lo mismo, ojalá EDTEAM nos pueda orientar al respecto...

[@franciscobecerra4780]

Me gusto lo de cero estres

[@MrCibershok]

Hola, le puse al titulo h1 position: absolute; y no queda arriba, queda en medio del div. ¿Por qué? Ayudaaaaa por favor, gracias

[@lrayze]

Hola. Ponle al top: 0, o cualquier otro valor y se posicionará arriba.

[@Alexis-hj6ci]

Alguien sabe cómo poner texto con centrado absoluto, pero debajo.

[@juancarlosmorenoguerra5319]

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

[@juancarlosmorenoguerra5319]

Juan Carlos Moreno Guerra por cierto el error pasa o se desmaqueta es cuando le pongo el position:absolute al H1 AYUDAAAAAAAAAAAAAAAAAAAAAAA

[@joelarraez2345]

el del footer no me funcione en internet elplorer 11 :(

[@EDteam]

joel arraez prueba con height:100vh en lugar de min-height

[@angelosamirttito1150]

El like es por el align-self lo demás sí lo supe a punta de horas pegadas al css

[@giovannisoto3181]

Por que dice que vacio y tiene dos metas que yo no se ni que pedo ?!

[@zeroes5237]

ala, que clase de brujera esta usando en el html??

[@alfredrodriguezgarcia2383]

ps bueno yo tuve q poner top 0 para q m salga sigan practicando -.-!

[@sebastianrosano4454]

groso mal !