Flexbox

Asi va quedando.

Estoy fascinado con todas las posibilidades!!! después de probar distintas combinaciones va quedando más o menos así:

Para cuando quieran mover una linea de código pueden presionar " ALT + (flecha de abajo o arriba) " para que no estén copiando y pegando la linea en la parte que quieran, esto les puede ahorrar un buen de tiempo

El poster esta genial, me hubiera gustado conocerlo antes, para imprimirlo y colgarlo jaja.

No es mucho, pero es trabajo honesto

En flexbox se trabaja con elementos hijos y elementos padre

• Elementos Padre: son aquellos que contienen otras etiquetas o elementos por dentro
• Elementos hijos: son aquellos elementos que están dentro de un elemento padre y no contienen a nadie más por dentro

<aside>
💡 Pueden haber padres dentro de otros padres, pero en este caso son hijos y padres al mismo tiempo, por lo que pueden usar ambas propiedades al tiempo

</aside>

Retomando el curso…

No se si a uno de ustedes les pasa, pero al menos a mi, a medida que voy evolucionando me va como que gustando mas este mundo. Cuando vemos un tema complejo por primera vez, sí que frustra, pero si recordamos que programar es controlar esa frustración, y nos damos el tiempo para digerir los temas, llega un punto en el que no digamos que lo dominas, pero lo entiendes muy bien, y es donde sientes mucha gratificación porque te das cuenta de que si se puede.
Never Stop Learning!!!

Así esta quedando mi juego por ahora.

CSS-TRICKS super bueno!!

Hola, por un momento al final no me estaba dando la distribución como a la profe, y era porque cuando copiaba el código no me daba. Luego me di cuenta que después de flex no había puesto “;” y esto como que inhabilitaba lo que seguía. Podrías servirles si de pronto les pasa lo mismo 😃

Con las herramientas del inspector podemos agregar cosas como justify-content y demás para ir viendo cómo queda el resultado. En este caso el justify-content no se logra percibir debido a que no hay suficiente espacio para ejecutarlo

Para ello podemos usar todo el tamaño de lo que estamos viendo en pantalla, usando 100vh como medida en height

vh = view height

Lo último que podemos hacer es centrar en el medio de la pantalla el contenido, con:

align-items: center;

De esta manera, todo lo del contenido de seleccionar mascota queda centrado

#seleccionar-mascota{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Creo que he tenido más confusiones con CSS que con JS 😦

flexbox --> permite alinear elementos vertical u horizontalmente por medio de contenedores

flex-direction --> direcion del elemento
row --> fila
column --> columna
justify-content --> espacio entre elementos
align-items --> alineacion del elemento

Flexbox es un sistema de diseño de CSS que permite crear diseños flexibles y adaptativos.
Con Flexbox, se pueden organizar elementos de manera sencilla en una página web, independientemente del tamaño de la pantalla o del contenido.

Voy a usar nord theme como paleta de colores, si hay tiempo lo paso a dracula theme.

Recuerdo que cuando iniciaba a aparender maquetaba por medio de tablas de html y era algunas veces facil otras no salia como queria.😄😄

No puedo concentrarme con la belleza de la profesora 😁

es un buen curso, pero se me vive trabando el video desde que terminó la parte de freddy, debería poder cambiarse la calidad de reproduccion de video. he probado en otra computadora, incluso en un dispositivo móvil, y en todos se traba, es la única plataforma que se me traba, por lo que mi internet no es. 😦

Para que lo guarden en sus apuntes de la clase:

tengo 20 años y me estoy adentrando en un mundo completamente nuevo, antes me decidí a aprender francés creyendo que no iba a llegar lejos, y si llegué lejos, lo mismo con el inglés y ahora estoy pensando que no llegaré lejos en la programación pero ya veremos, ademas esta muy chida la manera de enseñar de los maestros aquí en platzi,y con la información que podemos encontrar en internet es impresionante también asi que algo me dice que si llegaré lejos pero eso si a estudiar todos los dias 💪. Y muchismas gracias por este curso, son los mejores!!!

css me da dolor de cabeza, me gusta mas editar codigo en javascript la verdad 😦

Hola, les dejo una guía interactiva de flexbox, espero que les pueda servir(: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

Una guía completa en donde podras aprender a usar el flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-background

La etiqueta button es nieto de section y section es abuelo de button, ¿y el padre de ellos? la etiqueta p 🤣

1. Usar en css el :
   display: flex;

2. acompanado de ( flex-direction:row;)
   display: flex;
   flex-direction:row;

El resultado es el mismo.

Es decir usar el flex-direction o no usarlo es indiferente, por default el (display: flex) usa row.

Junto con Diego DeGranda, la profesora Estefany transmite una vibra y personalidad muy positivas. Los otros profesores igual tienen lo suyo, en general casi todos me agradan, pero los dos previamente mencionados para mi tienen algo especial en su manera de hablar.

![](

Flexbox es una herramienta súper poderosa que tenemos en CSS para poder alinear elementos y posicionarlos en la web

Con flexbox se puede organizar elementos de manera vertical o horizontal (No se pueden ambas)

Después de mucho indagar ya pude ponerle flex a esa sección, mi error era que lo tenia bloqueado desde JavaScript xD.

Como se dice: Nunca parar de aprender.

basicamente me agrada como enseña! ❤❤❤

Que gran herramienta es flex…ufff me siento pintor

cogiéndole amor al css

Super chévere como se controla desde el navegador para después pasar al código.
creo que le falto el height: 100vh; pero bueno también va en la misma section.

ya se puso mas complicada la cosa 🥴

Ha sido increible, uno puede ser un artista con esto.

Algo que noté fue que si no modificábamos el flex-direction a column(el defecto parece ser row), y usábamos align-items: center; , nuestros elementos se centraban de manera vertical

Pero si modificamos el flex-direction a column y usamos align-items: center; , los elementos se centran de manera horizontal

Entonces por lo que veo(alguien corríjame si me equivoco), si los elementos usan flex-direction: row; , justify-content centrará el contenido de manera horizontal y align-items lo hará de manera vertical. Pero si se usa flex-direction: column; , entonces justify-content centra a los elementos de manera vertical, mientras que que align-items lo hace de manera horizontal.

bonita clase, muy bien explicada

.titulo {
font-family: serif;
color: #FFC300;
width: 310px;
height: 50px;
background-color:#FF5733;
}

label{
background-color:lightcyan;
width: 65px;
height: 22px;
}

input{
background-color:orangered;
}

button{
background-color:orange;
}

Genial, siento que flexbox llevará un poco más de trabajo por su complejidad.

Hola, comparto mi avance

Esta tabla es muy completa. Espero les sirva

esto me recuerda bastante al sistema de UI de unity

Aqui esta lo que he hecho ![](url

)

👴 Flexbox padres👨Flexbox padres-hijos 👶Flexbox hijos

Es interesante la forma en que se usan los Flexbox para el alineamiento de las paginas web. La verdad, quede impresionado ya que este permite simplificar la mayor cantidad de codigo de estilos el cual hace el trabajo mas facil.

super

Me gusta mucho el avance 😄

Estefany Aguilar creo es una estupides el editar la pagina en el navegador cuando nos esta demostrando a programar en un editor… con todo respeto eso me confunde. Gracias

Flexbox es para mover y posicionar elementos de la pagina en este caso el texto , en programación seria a mover elementos padre (titulo) y a elementos hijo (conetenido del elemento padre, como párrafo etc)

se puede centrar, posicionar en forma de columna, etc.

Caray tengo trabajo el día de hoy 🤣

Excelentes herramientas, gracias por compartir las guías.

**La tecnología flex tiene diferentes propiedades dependiendo si el contenedor es padre o hijo: **

Recurso: CSS-Tricks

Nota: Google Chrome tiene una opción en la consola para ver de manera “previa” el código, en este caso flexbox.

place-items: center;

Es un acortativo de
justify-content: center:
align-items: center;

En flexbox puedes dimensionar de manera vertical u horizontal, no de ambas.

Así va quedando =)

.titulo{color:hotpink;width:310px;height:50px;background-color:teal}#seleccionar-mascota{display:flex;flex-direction:column;justify-content:center;align-items:center}

let ataqueJugador
let ataqueEnemigo
let vidasJugador = 3
let vidasEnemigo = 3

function iniciarJuego() {
let sectionSeleccionarAtaque = document.getElementById(‘seleccionar-ataque’)
sectionSeleccionarAtaque.style.display = ‘none’

let sectionReiniciar = document.getElementById('reiniciar')
sectionReiniciar.style.display = 'none'

let botonMascotaJugador = document.getElementById('boton-mascota')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)

let botonFuego = document.getElementById('boton-fuego')
botonFuego.addEventListener('click', ataqueFuego)
let botonAgua = document.getElementById('boton-agua')
botonAgua.addEventListener('click', ataqueAgua)
let botonTierra = document.getElementById('boton-tierra')
botonTierra.addEventListener('click', ataqueTierra)

let botonReiniciar = document.getElementById('boton-reiniciar')
botonReiniciar.addEventListener('click', reiniciarJuego)

}

function seleccionarMascotaJugador() {
let sectionSeleccionarMascota = document.getElementById(‘seleccionar-mascota’)
sectionSeleccionarMascota.style.display = ‘none’

let sectionSeleccionarAtaque = document.getElementById('seleccionar-ataque')
sectionSeleccionarAtaque.style.display = 'block'

let inputHipodoge = document.getElementById('hipodoge')
let inputCapipepo = document.getElementById('capipepo')
let inputRatigueya = document.getElementById('ratigueya')
let spanMascotaJugador = document.getElementById('mascota-jugador')

if (inputHipodoge.checked) {
    spanMascotaJugador.innerHTML = 'Hipodoge'
} else if (inputCapipepo.checked) {
    spanMascotaJugador.innerHTML = 'Capipepo'
} else if (inputRatigueya.checked) {
    spanMascotaJugador.innerHTML = 'Ratigueya'
} else {
    alert('Selecciona una mascota')
}

seleccionarMascotaEnemigo()

}

function seleccionarMascotaEnemigo() {
let mascotaAleatoria = aleatorio(1,3)
let spanMascotaEnemigo = document.getElementById(‘mascota-enemigo’)

if (mascotaAleatoria == 1) {
    spanMascotaEnemigo.innerHTML = 'Hipodoge'
} else if (mascotaAleatoria == 2) {
    spanMascotaEnemigo.innerHTML = 'Capipepo'
} else {
    spanMascotaEnemigo.innerHTML = 'Ratigueya'
}

}

function ataqueFuego() {
ataqueJugador = 'FUEGO’
ataqueAleatorioEnemigo()
}
function ataqueAgua() {
ataqueJugador = 'AGUA’
ataqueAleatorioEnemigo()
}
function ataqueTierra() {
ataqueJugador = 'TIERRA’
ataqueAleatorioEnemigo()
}

function ataqueAleatorioEnemigo() {
let ataqueAleatorio = aleatorio(1,3)

if (ataqueAleatorio == 1) {
    ataqueEnemigo = 'FUEGO'
} else if (ataqueAleatorio == 2) {
    ataqueEnemigo = 'AGUA'
} else {
    ataqueEnemigo = 'TIERRA'
}

combate()

}

function combate() {
let spanVidasJugador = document.getElementById(‘vidas-jugador’)
let spanVidasEnemigo = document.getElementById(‘vidas-enemigo’)

if(ataqueEnemigo == ataqueJugador) {
    crearMensaje("EMPATE")
} else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') {
    crearMensaje("GANASTE")
    vidasEnemigo--
    spanVidasEnemigo.innerHTML = vidasEnemigo
} else if(ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') {
    crearMensaje("GANASTE")
    vidasEnemigo--
    spanVidasEnemigo.innerHTML = vidasEnemigo
} else if(ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
    crearMensaje("GANASTE")
    vidasEnemigo--
    spanVidasEnemigo.innerHTML = vidasEnemigo
} else {
    crearMensaje("PERDISTE")
    vidasJugador--
    spanVidasJugador.innerHTML = vidasJugador
}

revisarVidas()

}

function revisarVidas() {
if (vidasEnemigo == 0) {
crearMensajeFinal(“FELICITACIONES! Ganaste 😃”)
} else if (vidasJugador == 0) {
crearMensajeFinal(‘Lo siento, perdiste 😦’)
}
}

function crearMensaje(resultado) {
let sectionMensajes = document.getElementById(‘mensajes’)

let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', las mascota del enemigo atacó con ' + ataqueEnemigo + '- ' + resultado

sectionMensajes.appendChild(parrafo)

}

function crearMensajeFinal(resultadoFinal) {
let sectionMensajes = document.getElementById(‘mensajes’)

let parrafo = document.createElement('p')
parrafo.innerHTML = resultadoFinal

sectionMensajes.appendChild(parrafo)

let botonFuego = document.getElementById('boton-fuego')
botonFuego.disabled = true
let botonAgua = document.getElementById('boton-agua')
botonAgua.disabled = true
let botonTierra = document.getElementById('boton-tierra')
botonTierra.disabled = true

let sectionReiniciar = document.getElementById('reiniciar')
sectionReiniciar.style.display = 'block'

}

function reiniciarJuego() {
location.reload()
}

function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}

window.addEventListener(‘load’, iniciarJuego)

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title>MOKEPON!</title>
<script src="./js/mokepon.js"></script>
<link rel=“stylesheet” href="./styles.css">
</head>
<body>
<h1 class=“titulo”>MOKEPON! 🔥💧🌱</h1>
<section id=“seleccionar-mascota”>
<h2>Elige tu mascota:</h2>
<label for=“hipodoge”>Hipodoge</label>
<input type=“radio” name=“mascota” id=“hipodoge” />
<label for=“capipepo”>Capipepo</label>
<input type=“radio” name=“mascota” id=“capipepo” />
<label for=“ratigueya”>Ratigueya</label>
<input type=“radio” name=“mascota” id=“ratigueya” />
<button id=“boton-mascota”>Seleccionar</button>
</section>
<section id=“seleccionar-ataque”>
<h2>Elige tu ataque:</h2>
<section id=“mensajes”>
</section>
<section id=“reiniciar”>
<button id=“boton-reiniciar”>Reiniciar</button>
</section>
<div>
<button id=“boton-fuego”>Fuego 🔥</button>
<button id=“boton-agua”>Agua 💧</button>
<button id=“boton-tierra”>Tierra 🌱</button>
</div>
<p>Tu mascota <span id=“mascota-jugador”></span> tiene <span id=“vidas-jugador”>3</span> vidas</p>
<p>La mascota <span id=“mascota-enemigo”></span> del enemigo tiene <span id=“vidas-enemigo”>3</span> vidas</p>
</section>
</body>
</html>

![](

)

¿Cómo usar Flex Box en CSS?
Resultado de imagen para flex box en css
El modelo CSS Flexbox parte de la alineación horizontal, aunque también es posible organizar los elementos en una columna. Además, se puede invertir la dirección, de izquierda a derecha o de abajo a arriba. Para ello, se utiliza el comando flex-direction: row: de izquierda a derecha

Si lo quisieramos cambiar, podríamos poner justo abajo

flex-direction: column;

Esta dirección es muy importante para otros elementos o propiedades de los contenedores