💙 Cómo hacer un LAYOUT con FLEXBOX CSS (Tutorial paso a paso)

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ต.ค. 2024

ความคิดเห็น • 72

  • @kikopalomares
    @kikopalomares  3 ปีที่แล้ว +9

    CURSO GRATIS de FLEXBOX AQUÍ 👉 bit.ly/38yEiO3

  • @SuperEspix
    @SuperEspix ปีที่แล้ว +4

    Tu video es super corto y simple pero me dejo mucho mas claros ciertos conceptos que ni les había prestado atención como el aside, que no lo había tomado en cuenta en ningun proyecto, recien ando empezando en este mundo pero ya con esto no se me olvida nunca más el aside. mil gracias! buen video!

  • @mariapulgarmendoza8607
    @mariapulgarmendoza8607 3 ปีที่แล้ว +5

    Kiko eres el mejor. Estoy haciendo un bootcamp gratuito de diseño web, tiene tutoriales, a la hora de hacer mis proyectos siempre vuelvo a tus videos. Mil gracias!!!!!

  • @Mayan3279
    @Mayan3279 ปีที่แล้ว +2

    Kiko, realmente eres un crack explicando el contenido, he comenzado a seguirte, y la verdad que eres absolutamente recomendable como tutor, profesor, comunicador. Gracias.

    • @mapy01
      @mapy01 ปีที่แล้ว

      Así es! excelente tutorial me ha cambiado la vida saber esto!

  • @fatimamunoznarvaez9883
    @fatimamunoznarvaez9883 3 ปีที่แล้ว +4

    Kiko me gusta mucho tu canal, muchas gracias por compartir tus conocimientos. Siento que te entiendo más a ti que a mis profesores de la universida. Es interesante porque ya te seguía en tu canal y un día el profesor en la clase nos pidió que reforzaramos el tema con un video, y resulta que el video era este, y dije, hasta en la universidad me sale Kiko Palomares. Todavía me faltan muchos videos tuyos por ver. Saludos desde Costa Rica.

  • @jungkookiewings8275
    @jungkookiewings8275 2 ปีที่แล้ว +1

    Mil gracias. Estoy trabajando en mi proyecto en el que creí que lo perdía. Pero ví el video y pude guiarme súper bien. Entendí mejor que en mis clases, mil gracias!

  • @danyevangelista8905
    @danyevangelista8905 2 หลายเดือนก่อน +1

    Wao, lo haces ver tan fácil 😮😮. Gracias por el vídeo 😊😊

  • @floriis2273
    @floriis2273 4 หลายเดือนก่อน +1

    Kiko es un grande!!! Lo explicas todo muy bien!!!

  • @katerineardilacaicedo4004
    @katerineardilacaicedo4004 ปีที่แล้ว +2

    de verdad que si me gusta tus videos . una enseñanza muy clara . siempre viendo tus videos muchas gracias .

  • @brhantunquipa5927
    @brhantunquipa5927 ปีที่แล้ว +1

    Gracias . Realmente entendi mucho en pocos minutos

  • @mannyanthony9130
    @mannyanthony9130 ปีที่แล้ว +1

    Lo explicas muy fácilmente , en otros videos o tutoriales algunos se dan tantas vueltas , siempre menos es mas. Gracias.

  • @santiagomontoya3714
    @santiagomontoya3714 2 ปีที่แล้ว +2

    llevaba días buscando este video, muchas gracias.
    Saludos desde colombia.

  • @virtualpyshop_py2603
    @virtualpyshop_py2603 ปีที่แล้ว +1

    ¡Excelente tutorial. GRACIAS!

  • @selvapurpura
    @selvapurpura ปีที่แล้ว +1

    que buena información me gusto, muchas gracias

  • @joseamartinezr1966
    @joseamartinezr1966 2 ปีที่แล้ว +1

    Qué fácil lo haces. Muchas gracias por el vídeo!!!

  • @florenciaestrada4586
    @florenciaestrada4586 2 ปีที่แล้ว +1

    Muchísimas Gracias por dedicarte a esto! Soy muy nueva en este mundo y la verdad que me orientaste muchísimo! Éxitos!

  • @javaboy6581
    @javaboy6581 2 ปีที่แล้ว +6

    Mil gracias, M-A-E-S-T-R-O
    Me ha quedado igual que a ti, pero qué feo queda el footer, no hay manera de que quede abajo.
    Gracias por compartir, me subscribo!

    • @FrvnkTrhee
      @FrvnkTrhee 2 ปีที่แล้ว

      x2

    • @ferminazamarprieto4452
      @ferminazamarprieto4452 2 ปีที่แล้ว

      @@FrvnkTrhee x3

    • @alejandrotorres3290
      @alejandrotorres3290 ปีที่แล้ว

      Se puede, yo metí todo el contenido del body en un div y a ese div le puse el display flex + el flex wrap , entonces empiezas a darle a cada parte un tamaño , es decir , al header un flex de 100% como le dije q ocupara todo el ancho y tiene el wrap mandará todo lo demás debajo de el, del mismo modo con el nav flex 100% , luego al aside 30% al section 70% (asi ambos se mantienen en el mismo espacio partido en 2) y al footer 100% , si te queda espacio al final es x q tienes muy poco contenido , al llenar mas parrafos etc se llenará pero si quieres tapar de todas formas el espacio final con poco contenido puedes ponerle al div principal (el contenedor) un height de 100vh con eso ocupara el largo de la pantalla :3 espero les sirva

  • @ascyi2282
    @ascyi2282 2 ปีที่แล้ว +1

    Me ayudo bastante para comenzar hacer paginas web con un layout en CSS, muchas gracias :D

  • @alessandramedeiros8225
    @alessandramedeiros8225 ปีที่แล้ว +1

    Excelente professor! 👏👏👏

  • @javierocampos818
    @javierocampos818 8 หลายเดือนก่อน +1

    muy buena explicacion , un subscriptor mas amigo.

  • @elsektor
    @elsektor 2 ปีที่แล้ว +1

    exelente aporte master gracias

  • @miguelvasquez9849
    @miguelvasquez9849 ปีที่แล้ว

    gracias por el video, hay manera de dejar el aside con un tamaño fijo y que el section ocupe el resto del width?

  • @Jjosemanuel_05
    @Jjosemanuel_05 2 ปีที่แล้ว +2

    Graciassss

  • @7gatopardo
    @7gatopardo 3 ปีที่แล้ว +1

    Muy bueno. Muchas gracias por la explicación.

    • @kikopalomares
      @kikopalomares  3 ปีที่แล้ว

      gracias por tu comentario!! 😁

  • @threelions7421
    @threelions7421 3 ปีที่แล้ว +1

    Video buenisimo.Muchas gracias!!!

  • @FrancisVirginiaPadillaIzaguirr
    @FrancisVirginiaPadillaIzaguirr 2 วันที่ผ่านมา

    Hola, buenas tardes,¿ cuál sería la opción para poner el nav como columna al lado izquierdo?

  • @whitenoiz77-n7x
    @whitenoiz77-n7x 3 ปีที่แล้ว +2

    Excelente video! Podrias decirme como agregoun submenu desplegable a cada uno de los menus principales he tratato de hacerlo pero me queda mostrando siempre el contenido

  • @warlliromano9656
    @warlliromano9656 3 ปีที่แล้ว +1

    Gran video me salio a la perfeccion!

  • @sebastian9075
    @sebastian9075 2 ปีที่แล้ว +1

    gracias profee siiiiiiiiiiuuuuuuuuuuuuuuuuu

  • @lrunner5845
    @lrunner5845 3 ปีที่แล้ว

    Buenas kiko, que significa el Screen and, porque al ponerlo no se me cambia el flex-direction del nav y .row, pero al retirarlo funciona todo excelente...
    Muy buen video! Me encanto

  • @victorsempereguilabert9127
    @victorsempereguilabert9127 3 ปีที่แล้ว +1

    Gracias por tus videos, sigue con estos vídeos, y si tienes presets o consejos dejalos en tus vídeos o comentarios

    • @kikopalomares
      @kikopalomares  3 ปีที่แล้ว

      genial! me alegro! Para códigos y ejemplos me podéis seguir en GitHub donde iré colgando cosas! 😁 github.com/KikoPalomares

  • @MundoReactivoDev
    @MundoReactivoDev 3 ปีที่แล้ว

    Excelente video!! Que programa utilizas para grabar la pantalla ?

  • @jcare07
    @jcare07 3 ปีที่แล้ว +1

    Excelente!

  • @damianfelix7890
    @damianfelix7890 3 ปีที่แล้ว +1

    Excelente video!

  • @elizarosas1640
    @elizarosas1640 2 ปีที่แล้ว +1

    Grandee

  • @hermanborrego1428
    @hermanborrego1428 2 ปีที่แล้ว +1

    como se hace para crear la hoja de stylo al lado?

  • @matiasg8196
    @matiasg8196 2 ปีที่แล้ว +1

    Hola buenas!!
    Porque el atributo Flex del asid esta en pixeles y el section en porcentaje?
    Gracias

    • @alejandrotorres3290
      @alejandrotorres3290 ปีที่แล้ว

      se confundió y no se dio cuenta creo , pero es 30% y no 30px ya q el section tiene el 70% restante y asi ambos cubren el 100% del ancho :3

  • @tercermundistalatino1624
    @tercermundistalatino1624 ปีที่แล้ว

    Hola Kiko Palomares.. porfavor. Me podrías ayudar.. con hacer un menú despegable y explicar cómo se hace..
    Ya vía varios. Pero no logro que me quede igual.. ni asiendolo igual..
    Sigo sin entender los comportamientos de display..
    Y el acomodo de las clases. Padres e hijos..

  • @williamsquispe-fr6ns
    @williamsquispe-fr6ns ปีที่แล้ว +1

    hola, estoy empezando en esto de los flex box. me gustaria saber si tienes algun video donde enseñas como configurar tu vscode para tener la pagina de navegador actualizandose en tiempo real. yo tengo que entrar en mi index.html y apretar f5 cada vez que quiero actualizar mi pagina navegador

    • @kikopalomares
      @kikopalomares  ปีที่แล้ว

      Creo recordar que en este vídeo: th-cam.com/video/O1_wCWHJuV0/w-d-xo.html

  • @akkajuega5561
    @akkajuega5561 3 ปีที่แล้ว +1

    Ahora me toca aplicarlo

  • @bunnysenpai6349
    @bunnysenpai6349 3 ปีที่แล้ว +1

    Me gustaría que hicieras un video CSS más explicado .. nuevo suscrib

    • @kikopalomares
      @kikopalomares  3 ปีที่แล้ว +2

      pues estate atento que iré haciendo muchos vídeos sobre CSS, vete a mis listas de reproducción y encontrarás varios ya! 👍

  • @lucianocutino664
    @lucianocutino664 2 ปีที่แล้ว

    Hola kiko no se porque mi footer queda a la derecha de aside y section. hice paso a paso lo que mostraste y me queda así y no se porque

  • @bautistafuentes6943
    @bautistafuentes6943 2 ปีที่แล้ว

    Hola! si quiero poner el aside del lado derecho y el section al izquierdo, seria correcto meter el section y el aside dentro de un div y darle row reverse para que se invierta la posicion? o de que otra manera se podria hacer?

    • @alejandrotorres3290
      @alejandrotorres3290 ปีที่แล้ว

      Lo mas fácil sería solo cambiar el orden en el html , colocar primero el section y luego el aside

  • @Henry_Nunez
    @Henry_Nunez 2 ปีที่แล้ว +1

    👏👏👏👍

  • @rz7xtv
    @rz7xtv 3 ปีที่แล้ว +1

    Saludos, que programa esta iutilizando?

  • @cristorrez8073
    @cristorrez8073 3 ปีที่แล้ว

    Tengo una duda yo ponía display:block para que sean columnas buen dato row y column

  • @gvlineageii6544
    @gvlineageii6544 3 ปีที่แล้ว

    Con que extensión actualizas la pagina automaticamente en el navegador? Yo debo actualizar la web cada vez que le hago modificaciones

  • @WilliamHerreramlm
    @WilliamHerreramlm 3 ปีที่แล้ว

    Se puede al section mandarlo a la derecha y dejar un espacio en blanco al centro?

    • @alejandrotorres3290
      @alejandrotorres3290 ปีที่แล้ว

      tendrías que agregar otro section al contenedor que tiene el aside y el section y luego cuadrar los porcentajes , es decir al aside un flex de 30% , al section blanco un flex de 40% y al section derecho lo restante osea 30%

  • @agentsmith2189
    @agentsmith2189 2 ปีที่แล้ว

    El footer deberia estar al finalizar el documento y section deberia cubrir todo ese espacio vacio hasta el footer

  • @juanzabarburu6555
    @juanzabarburu6555 2 ปีที่แล้ว

    Hola, para qué sirve el flex: 30px; en el aside?

    • @alejandrotorres3290
      @alejandrotorres3290 ปีที่แล้ว

      era 30% así mas el 70% del section cubren el 100% solo se confundió >_>

  • @normansilva1097
    @normansilva1097 2 ปีที่แล้ว

    Como haces para que el navegador se vea al costado del visual conde mientras vas codeándose?

    • @kikopalomares
      @kikopalomares  2 ปีที่แล้ว

      Usando la extensión "live server"

    • @juanzabarburu6555
      @juanzabarburu6555 2 ปีที่แล้ว

      Si te refieres a dividir la pantalla es con la teclas windows + la flecha de la derecha o izquierda

  • @franciscojaviersegundomart7122
    @franciscojaviersegundomart7122 3 ปีที่แล้ว

    no deberia ir todo andentro del header