Posicionamiento y Estilos con Display Flex en CSS
Contenido del curso
Marcelo Vinicio Chavarría Ugalde
María José Ledesma
Jorge Alberto Alba Vega
Carlos Adrian Rodriguez Bernales
Mario Barceló Sospedra
Aldo Yedro
Jhoana España Urresty
Danna Valentina Hernández Pinilla
Pablo Perez Lee
Magalí Acevedo
Jimmy Buriticá Londoño
Juan David Valencia
Jimmy Loloy Laurencio
Esteban Casallas
Juan Vásquez
Kevin Andrey Mora Vásquez
Nicolas Castañeda
Nicolas Castañeda
Patricio Manuel Ugarte
Markin Piero Pulache Guarniz
Joshua Ortiz Rosales
Sofía González Chavira
emanuel
María Camila Betancourth Ospina
Joel Dominguez Merino
Juan Christopher
Daniel Morán
Víctor Hugo Torres Fierro
Cristobal Torres
Diego Alejandro Moreno Pedroza
Harrinson Quintero
María José Ledesma
Jimmy Buriticá Londoño
Víctor Hugo Torres Fierro
Aldo Miguel Ortiz Parodi
Jesús Álvarez
Héctor Alonso Padilla Ramírez
Héctor Alonso Padilla Ramírez
Max Camargo
Jimmy Joel Pecho Malqui
Ulises Astrada
Juan Christopher
Chrystian Fabian Lozano Ramirez
Alex Leonardo Rodriguez Carvajal
Paula Andrea Hayle
Fabian Flores
Eric López
Manuel David Diaz
Héctor Alonso Padilla Ramírez
Brayan Felipe Getial
Jossie Steeven Quintero Giron
Mini guía de flexbox:
Propiedades en contenedores padre: display:flex; flex-direccion: row | column | row-reverse | column-reverse flex-wrap: nowrap | wrap | wrap-reverse Esta siguiente propiedad es un atajo para escribir el flex-direccion y el flex-wrap en una sola línea de código flex-flow: Primero escribes dirección | Luego escribes flex-wrap Posicionar horizontal justify-content: flex-star | flex-end | center | space-around | space-between Posicionar manera vertical aling-items: flex-star | flex-end | center | stretch | baseline
aling-content: flex-star | flex-end | center | stretch | space-around | space-between "Aling-conten solo se utiliza varias filas de elementos, pero si es una sola línea usamos aling-items"
Propiedades en elemento hijo
order: ; Esto se utiliza para cambiar el orden de nuestros elementos sin cambiar el orden real semantico y correcto de html. Sencillamente colocando números.
aling-self: aling-items: flex-star | flex-end | center | stretch | baseline "Muy importante, si en el padre del elemento tiene declarado flex-direccion:row; esta propiedad lo acomodara verticalmente. Y si es flex.direccion: column lo ordenara horizontalmente"
¡Gracias!
Nunca pares de aprender (y practicar) 🦄
Muchas GRacias
Flex es un tipo de display que permite que el contenedor padre sea flexible a los cambios que puedan tener los elementos hijos en su alineación.
Una vez tengamos el elemento padre con display flex tenemos otras propiedades que podremos usar para nuestro beneficio.
¡Muchas gracias! Con tu permito lo uso para mis apuntes. :D
Buen aporte!
Un pequeño resumen
¡Genial! es de los mejores resúmenes que he visto. ¡Gracias! 😊
gracias por el aporte, simple y completo.
Me pone nerviosa que la pantalla no se ve completa xD
Tienes razón, se corta la pantalla en el lado izquierdo.
Yo pensando que era mi navegador >:V
Creo que muchos ya jugaron el Flexbox Froggy. Pero pocos conocen el Flexbox Zombies. A mi opinión este otro está también super cool y muy didáctico. :wink
es muy buen juego !
qué buena forma de aprender
Chicos en Visual Studio Code, tenemos el shorcout para crear el contenerdor con su clase. De esta forma: Escribimos el nombre de la clase que le queremos colocar y luego presionamos la tecla tab.
.nombre-clase
Y este nos creará el contenedor directamente con la clase que le quisieramos colocar.
<div class="nombre-clase"></div>
Esto es por el toolkit emmet, te dejo una pagina de referencia, ya que este provee varias opciones para generar rapidamente tus etiquetas y estructuras html https://docs.emmet.io/
Te dejo un ejemplo de como usarlo para generar la estructura base del html de la clase
(div.box$.box>p{box$})*6
donde el . te indica la clase del elemento anterior, el $ indica que se inserte un numero de manera consecutiva para cada div que aparezca, {} se usan para indicar el contenido que ira dentro de la etiqueta y por ultimo se multiplica por 6 para que genere 6 veces esas etiquetas. Dando el siguiente resultado:
<div class="box1 box"> <p>box1</p> </div> <div class="box2 box"> <p>box2</p> </div> <div class="box3 box"> <p>box3</p> </div> <div class="box4 box"> <p>box4</p> </div> <div class="box5 box"> <p>box5</p> </div> <div class="box6 box"> <p>box6</p> </div>```
Paso un tip de Pro-Gamer Developer, por si a alguien le interesa. Utilizando el plugin de Emmet se pueden abreviar estructuras repetitivas y complejas que a veces resultan molestas de escribir "a mano" o incluso copiando y pegando una y otra vez.
Esta herramienta ya viene instalada por defecto en VS Code y es muy fácil de instalar en otros editores de texto, sugiero leer la documentación. Con algunas pocas reglas de sintaxis sencilla se puede ahorrar mucho tiempo y esfuerzo.
Escribiendo:
(div.box$.box>p{box$})*6
Se genera la siguiente estructura HTML:
<div class="box1 box"> <p>box1</p> </div> <div class="box2 box"> <p>box2</p> </div> <div class="box3 box"> <p>box3</p> </div> <div class="box4 box"> <p>box4</p> </div> <div class="box5 box"> <p>box5</p> </div> <div class="box6 box"> <p>box6</p> </div>
Déjame un 💚 si quieres que escriba un ++Tutorial de estudiante++ sobre esta herramienta para este curso.
💚 vamos deseo ver ese curso
En flexbox tenemos lo que se llama MAIN AXIS (eje principal) y CROSS AXIS (eje secudario) los elementos se mueven SIEMPRE en el MAIN AXIS que por defecto es de forma HORIZONTAL porque esta el FLEX-DIRECTION: ROW pero nosotros podemos cambiar que ya no este de forma horizontal con FLEX-DIRECTION:COLUMN asi el main axis esta de forma vertical y el cross axis de forma horizntal
property justify-content alinea elementos horizontalmente, valores:
property align-items alinea elementos verticalmente
property flex-direction define la dirección de los elementos en el contenedor. / Permite elegir la alineación de los elementos hijos sea en vertical (column) u horizontal (row). Viene por defecto. valores:
property order para agregar un orden a elementos individuales
property **flex-wrap ** especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas
property flex-flow es una combinación de flex-direction y flex-wrap. Acepta un valor de cada una separada por un espacio. Permite establecer filas y envolverlas.
property align-content determina el espacio entre las líneas, mientras que align-items determina como los elementos en su conjunto están alineados dentro del contenedor. Cuando solo hay una línea align-content no tiene efecto.
property align-self permite los mismos valores de align-items. Se usa para un elemento específico
++Nota que cuando estableces la dirección a una fila invertida o columna, el inicio y el final también se invierten.++
Gracias por el resumen!!
excelente
Creo que no hay mejor guía para aprender Flexbox como lo es Flex Cheatsheet No olviden que la Practica hace al maestro. Asi que no se preocupen si no entienden a la primera. Es cuestión de estudiar unas tras otra. Hacer muchas paginas y cuando menos vean, ya seran unos expertos.
Otra forma de practicar es con el maravilloso juego de Flexbox-Froggy
Gracias.
Otro recurso también lo pueden ubicar en:
Recién entré al mundo del desarrollo y vaya que se me ha hecho difícil este reto. :(
Héchale ganas! Animo!
Se ve bien cool eso sí!!!
La guia en formato imagen tomada de la pagina para tenerla de referencia:
.
¡Completísimo!
Esta super
Ayer hice el reto del layout y me tardé horas. Me costó sangre, sudor y lágrimas. Ahora que me muestran flexbox, lloro de igual forma, pero de alegría. No puedo, sin embargo, evitar sentirme en el fondo, algo traicionado como si de mi se hubieren burlado el día de ayer. :p
Te entiendo perfectamente, en mi caso me tomó inclusive más de 1 día entero... pero no me di por vencido y pude terminar. Pero de haber manejado display:flex lo hacía en 1 hora xD.
Pues a mi me tomó dos días. Y tuve que ver algunos tutoriales en YouTube porque no entendía por qué no se posicionaban los elementos como quería. Me di cuenta que no entendía bien el position hasta emplear unas horas en entenderlo bien fue qué pude terminar el reto.
The Complete Flex Layout Editor & Source Code Generator
Brutal este aporte :) Gracias
Con flex.
Buena selección de animes!
¿Cómo se llama el último?
Orale... y muchos profes se la complicaban explicando esto... y pum llega el profe degranda y en 15 minutos me voló la cabeza.
😅😅 .
jajajajajajajaja
Notas de la clase
Muy buen aporte...
En el editor hay opciones flex o flexbox e inline-flex o inline-flexbox. ¿Hay alguna diferencia práctica?
display: flex
El valor flex hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca.
display : inline-flex
El valor inline-flex hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.
CSS Reference: display Usando las cajas flexibles CSS
en mi caso si pongo flexbox no me funciona.. solo con flex
