Veamos cómo hacer el mismo ejemplo ahora con Facebook.
Abrimos el Index del número 10 y el botón derecho a abrir con Live Server todos los ejemplos funcionan
bien en Chrome o Firefox o cualquier navegador moderno.
Tampoco no funcionan digamos en Explorer 6 pero por ejemplo en este caso lo voy a probar en CROM y los
de Grid los probó el Firefox Developer Edition entonces vamos a colocar de nueva cuenta con Saiba y
abrimos nuestra hoja de estilos con el scroll hacia abajo y colocamos un media Huet recolocarlos como
7 6 8 pixeles y colocamos nuestro selector aquí vamos a colocar display Flex y a la hora de que aplicás
Flex siempre te va a pasar esto que está aquí ojo siempre las cajas van a tratar de acomodarse de cierta
forma y después tenemos este ãrtico y tenemos también aceite.
Si recuerdas al menos en el caso de Flex Box tienes que definir el ancho en el hijo mientras que en
Grid es en el padre en Flex Box es en el hijo Asai y también articula qué tamaño te gustaría colocar.
Bueno vamos a colocarlo con el surgen de Flex Flex no va a tener o no va a crecer porque va a definirse
por la base no va a hacerse más pequeño musical y digamos que nuestras hoy debe de medir 33.3 por ciento
menos dos y el ártico similar a este vamos a ponerle el mismo mismo código pero aquí va a ser 66 .7
por ciento para que la suma nos dé el 100 por ciento también aquí nos hace falta un justificante y vamos
a colocar Espais between resguardamos cambios abrimos nuestro proyecto y puede ser que se dé bastante
bien y se lo abrimos en lo que viene siendo un dispositivo más pequeño puede ser que se vea bastante
bien se adapta correctamente el diseño fluye correctamente y creo yo que se ve bastante bien similar
a la mayoría de sitios de noticias o también los blogs Veamos ahora cómo hacer lo que hicimos en el
video anterior.
Colocar esta barra de este lado es más sencillo con Flex Box en este caso es por eso que nace o tenemos
este capítulo para que veas las diferencias entre Flex y Grid es importante que conozcas ambos para
poder hacer o mostrar de este lado hay dos formas muy comunes una es que le pongas Order menos uno y
eso es lo que haces mostrar mostrarlo del lado izquierdo este se podría decir que los hijos una vez
que le colocas a quien el padre consigue Sidebar display Flex este tiene un orden de uno y éste tiene
un orden de 2 conforme se van presentando en el html su orden.
Por lo tanto agregando menos uno te adelantas o dices bueno este es menos uno pero este es uno entonces
lo empuja hacia el lado derecho.
Personalmente creo que esta es mejor opción que yo recomiendo colóquese Order te va a dar un poco más
de vas a poder saber con números exactamente qué está pasando porque la otra opción en Flex Box existe
algo que se conoce como la dirección se conoce como Flex direction existen existen 4 valores que son
los más comunes uno es columnas es decir el diseño se muestra de arriba hacia abajo otro es Column Rivers
que básicamente es lo mismo pero por ejemplo puedes ver que actualmente nuestra entrada está arriba
con Colón River sería hacia abajo.
Tener esta parte de abajo y arriba se van a cambiar de lado el default es el que se conoce como Rou.
Por lo tanto este tenerlo o no si no has cambiado la dirección previamente no tiene ningún sentido colocarlo
está totalmente de más porque ese es el default.
Puedes ver que si lo quito nada va a cambiar.
Pero Roh muestra los elementos del lado izquierdo hacia la derecha.
Por lo tanto Rob Rivers nos haría lo que requerimos la Extraction Rob Rivers guardamos cambios y que
se coloca del lado izquierdo.
Esta es otra forma de hacerlo personalmente creo que es más fácil con el orden son menos líneas de código
y además puedes darle un orden con números 1 2 3 4 y ir cambiando el orden de acuerdo en mi cuerpo.
Creo yo que es mejor opción en el siguiente video.
Veamos un poco lo que es el layout Shifter ya lo vimos en este ejemplo es cambiar el diseño drásticamente
en cada media Quay.
Así que veámoslo en el siguiente video.