Trucos con Flexbox (1) - Centrado absoluto, Dividir pantalla, Sticky footer
Вставка
- Опубліковано 19 вер 2024
- En este video veremos tres casos reales del diseño web que nos daban muchos dolores de cabeza y que se resuelven muy fácil con Flexbox:
1. Centrado absoluto
2. Dividir perfectamente la ventana
3. Footer siempre abajo de la ventana
Visítanos en nuestra página web escuela.digital
Síguenos en Facebook: escuela.digital...
Síguenos en Twitter: escuela.digital...
Únete a la comunidad Escuela Digital en Facebook:
escuela.digital...
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!
Lo del centro era justo lo que estaba buscando, gracias!
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.
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.
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.
Simplemente fantástico tus clases Alvaro, felicitaciones.
gracias Álvaro muy buenos trucos.
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
Gracias, llevaba dias sin entender como funcionaba flexbox
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
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
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
Eres el mejor, excelentes videos. Mil gracias por compartir.
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
Gracias me sirvió mucho.
Como funcionaría el primer ejemplo en Mobile
Excelente tutorial, me ayudaste mucho...muchas gracias :D
Á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 ??
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?
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
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.
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)
cuando le pongo position absolute al h1 se pone encima del contenedor no arriba del contenedor ???
Hola muchas gracias por la explicación esta genial
Como puedo vincular flex con boostrap?
Saludos
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 ??
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?
Genial pero una pregunta como puede abreviar la sintaxis del html ¿es un plugins o script que le instaló al sublime text ?
emmet html
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
en el primer ejemplo se activa el hover simplemente con mover el mouse fuera del container no dentro fala total
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.
Alvaro Felipe sin barbita y gafas..!!! Esto es oro señores..jaja
Muchas gracias!, me solucionaste el problema, ya me estaba volviendo loco con el problema del footer.
Este video me ha cautivado
hermano muchas gracias saludos !!!
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
Ame tu vídeo !!!!!
que software usas para compilar el CSS ?
Prepos
Al parecer esta demas el h1 {left: 0;} con text-align:center; ya tiene el efecto, por q lo usaste?
Gracias, sos lo máximo
Excelente, gracias!!!
Muy buen tutorial
profesionalmente es correcto usar flex para todo o casi todo?
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
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
Impresionante!!!
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.
Super bueno el video me encanto
A Platzi no le gusta esto :v xD
+Luis Paredes css? eso existe? es comptaible? no creoh
Jajajajaja XD
El Álvaro Felipe del 2021 párese que se comió al Álvaro Felipe 2015. Buen video
Genial!
Gracias por este video! ;)
estuvo buenísimo.
dividir la pantalla y puse un menu con la propiedad justify-content: flex-end no funciona que puedo hacer?
Eso ya lo e dicho (100vh) me recuerdas a los profes!!! buen video gracias!
muy bueno el truco con flexbox :-))
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
Gracias ^^
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.
Alguien sabe cómo poner texto con centrado absoluto, pero debajo.
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...
Me gusto lo de cero estres
el del footer no me funcione en internet elplorer 11 :(
joel arraez prueba con height:100vh en lugar de min-height
Por que dice que vacio y tiene dos metas que yo no se ni que pedo ?!
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
ala, que clase de brujera esta usando en el html??
El like es por el align-self lo demás sí lo supe a punta de horas pegadas al css
ps bueno yo tuve q poner top 0 para q m salga sigan practicando -.-!
groso mal !