Vamos a abrir el cero seis columnas Flex Box abrimos este botón derecho y arrancarlo CON LA Observed
de nueva cuenta como hicimos en el video anterior aquí vamos a colocar uno que se va a llamar contenedor
Flex y abrimos CSS y la hoja de estilos crolos trabajo y arroba Milia Minuit para tener nuestro Miyako
7 6 8 pixeles y aquí vamos a colocar contenedor Flex que vendría siendo nuestra clase habilitamos primero
display Flex cuando veamos cambios puedes ver que cada uno de estos va a tomar cierto tamaño este toma
un poco más por la imagen más que nada entonces puedes ver que queda de la siguiente forma.
Ahora para darle tamaño a cada uno de estos como hicimos en el video anterior puedes ver que aquí tenemos
un main puedes utilizar el Maino puedes agregarle una clase de contenido principal
está claro esta clase a poner contenido principal y va a dar una base Flex Basis digamos Calc de nueva
cuenta 60 por ciento menos son Reem y si recuerdas tenemos dos aceita Sabsay puedes colocarla en ambos
una clase puedes seleccionar a Saidi y presionar comando o control de entrada seleccionar los dos Seibert
y colocar puntos Aibar y el flexivas es para este caso sería 20 por ciento casi 20 por ciento menos
un volumen para la separación y lo único que nos falta es el justificante el quisiere de nueva cuenta
spaces between si guardamos cambios y abrimos el código puedes ver qué queda de la siguiente forma ahora
aquí va un pequeño tip de Flex box cuando tienes o requiere cierto crecimiento digamos en partes proporcionadas
porque puedes ver que este dice 20 por ciento y 60 por ciento es decir es tres veces más grande.
Puedes cambiar este Flex por algo que sería más o menos de la siguiente forma Flex y aquí le colocas
3 y también colocas Flex
y aquí te colocas uno al otro les digas bueno y este Flex 3 y este Flex 1 que significan básicamente
S Flex como 3 y S Flex como uno le dicen a ese.
Tu factor de crecimiento es 3 y básicamente lo que va a hacer es decir bueno hay 1200 píxeles y así
te voy a asignar 3 pixeles a ti 1 y a ti 1.
Luego vuelve a repartir a otros 3 pixeles ti 1 y a ti 1.
Por eso crece 3 veces más que los otros dos guardás cambios puedes ver que es mucho más grande cuando
tienes esta sintaxis pierdes un poco la parte de la separación.
Hay varias formas de hacerlo.
También si le colocas a quien márgen right le digamos o mejor dicho un de creo que es un poco mejor.
2 Fram y lo mismo en este otro vas a tener esa separación de vuelta pero esto ya se siente como que
no muy muy bien en realidad entonces este es un pequeño Tip Si te llegas a topar con un código que diga
Flex 3 etc. Ya sabes que es el nivel de crecimiento y básicamente si un elemento mide 1000 pixeles y
uno tiene un factor de crecimiento de 3 y el otro tiene un factor crecimiento de 2.
Al final uno mide 600 y no mide 400 de forma automática.
En mi caso creo que esta sintaxis sería un poco mejor la que vimos anteriormente adquiere estudiando
deshacer.
Creo que ésta te da un poco más de control la que vimos con Flex Basis.
Esto te da un poco más de control.
Sin duda con esta opción puedes controlar un poco más el tamaño y también lo que viene siendo la separación
entre cada uno de los elementos así que puedes utilizar ésta pero sin duda puedes ver que incluso en
este caso Grid sigue siendo más sencillo para elementos que son así como muy grandes como estos creo
que nada le va a ganar a Grid pero cuando son elementos pequeños como una navegación o como algún contenido
dentro de un chip sin duda Flex Box creo que es mejor opción.
Pero son preferencias personales no te sientas obligado a utilizar uno sobre el otro siempre al final
creo que con la práctica vas a saber cuál utilizar en determinadas ocasiones al final casi todo es práctica
con práctica vas a tener un mayor control en el siguiente video veamos que es esto con un drop suena
un poco extraño no pero veámoslo con GRID y también con Flex Box en el siguiente video.