Vamos a abrir el 15 cero dos columnas iguales en flashmobs abrimos el índex y botón derecho abrimos
con la Observer luego de cerrar las anteriores pestañas y abrimos SDC y él está Helesponto.
Ese es un poco de scroll hacia abajo y de nueva cuenta vamos a utilizar lo mismo que hicimos en el video
anterior.
Vamos a agregar aquí en el contenedor dos columnas para generar estas dos columnas ahora con Flex Box
copió esta clase y aquí voy a colocar mis dos columnas.
Pero ahora va a hacer con flexos.
Por lo tanto va a ser display Reflex y de hecho eso es suficiente con eso es suficiente para tener las
dos columnas puedes ver que se generan automáticamente por la forma en que Flex Books funciona el cálculo
se hace correcto y se muestran de esta forma.
Ahora en el vídeo anterior vimos que podíamos agregar una separación en el mismo elemento donde declara
vamos display Grid.
En el caso de Flex Box es un poco diferente porque esa parte la haces más bien en el hijo le defines
el ancho en el hijo por lo tanto puede ser que aquí entra entrada blog y qué vas a poner punto entrada
blog y eso lo vas a hacer definir el tamaño lo podrás hacer con un width pero no es lo recomendable
con Flex box con Flex Box se utiliza Flex Basis y le puedes poner el 50 por ciento Guardar cambios y
al abrir puedes ver que se comporta exactamente igual porque éste se asigna automáticamente es decir
la cantidad de elementos que haya van a tratar o va a tratar Flex Box de hacerlos que quepan en un chip.
Por lo tanto esto es exactamente lo mismo ahora si lo colocas aquí como 49 por ciento.
Bueno eso si lo va a ser un poco más pequeño pero puedes ver que lo pongo 49 por ciento y eso lo único
que va a hacer es dejar un poco de espacio de este lado de este lado derecho que queda un poco de espacio
aquí no se llena.
Para ello tendrías que utilizar justifique contén que es la forma en las que vas a alinear contenido
horizontalmente y se recomienda spaces between.
Eso sí te va a agregar un poco de separación pues el que queda medio es la separación porque básicamente
spaces between lo que hace es colocar un elemento a la izquierda y otro a la derecha y en este caso
dejar a medias libre.
Entonces eso es lo que hace spaces between recomendado cuando quieres que se vea de esta forma por ejemplo
un diseño que tome todo el espacio que haya disponible y que haya separación entre cada elemento.
Ahora tal vez digan bueno pero queremos una separación aquí de 20 píxeles y aquí hay 40 píxeles alguien
que tenga muy buen ojo y te diga ahí hay más separación.
Es difícil porque estamos calculando con porcentajes para ello se recomienda utilizar Calc y primero
lo tienes que pasar el tamaño base es decir 40 y 50 por ciento porque esa es nuestra base menos y muy
importante tienes que poner menos y un espacio si lo pones junto.
Puedes ver que cambia de color y digamos un Reem.
Eso es lo que va a hacer es decirle bueno toma el 50 por ciento menos un Reem y un remé en una entrada
y un régimen otra entrada van a hacer una separación de 20 píxeles.
Por eso vamos a tener esta separación aquí si quieres que sean 100 píxeles bueno puede ser 10 Rubem
y eso va a agregar Incluso mucha más separación.
Entonces de esta forma es cómo sería el estilo de Flex box para tener un poco de separación aquí ahora
de nueva cuenta si haces esto pequeño pues tal vez no se vea muy correctamente o simplemente no quieres
que se vea así.
De nueva cuenta la forma que no vas a solucionar es con media y esta vez lo voy a hacer a 480 píxeles
tú defines 2010 quieres existen algunos tamaños es decir usualmente para un teléfono tamaño mediano.
Este es el tamaño usualmente para una tablet de 768 píxeles usualmente para una laptop son 992 pixeles
y usualmente para una computadora de escritorio son 1200 píxeles pero tú puedes agregar los de Aquaris
que desees.
Estos son un poco más los estándares entonces digamos que en 480 quiero que se aplique este código.
Guardamos cambios y puedes ver que por ejemplo ser un poco más o voy a abrir mi mi barra mi consola
puedes ver que aquí se ve bien y será algo un poco más pequeño.
Pasándolos 480 ya tenemos dos columnas y van a ser dos columnas iguales y puedes ver que esta sería
la forma de hacerlo con Flex Box.
Ya tienes la forma de hacerlo con Flex Box y también la forma de hacerlo con Grid puedes ver que con
Grid es un poco menos solamente es un selector mientras que con Flex box son dos selectores.
En el siguiente video vamos a continuar con el siguiente cero a tres columnas iguales ahora con Grid.
Así que veamos en el siguiente video.