Veamos ahora la Your sister Flex Box botón derecho a abrir el Live Server y de nueva cuenta en el dispositivo
pequeño.
La idea es que este se vaya hacia abajo que de nueva cuenta vamos a colocar aquí la Your sister una
clase o cualquier cosa en realidad para cualquier cosa pero si una clase que se llame como desees para
que sea nuestro contenedor de Flex y aquí vamos a colocar el display Flex guardamos cambios y por default
puedes ver que se ven de esta forma.
Como mencioné anteriormente por default siempre se coloca el flex Direction como Rou pero en este caso
lo requerimos como Colom segregamos Colombia abrimos lo que viene siendo el que se coloca en columna
ahora para colocar este acá abajo tendría que ser con un primers resguardamos cambios abrimos y puede
ser que ya se coloca en la parte inferior si lo hacemos un poco más grande la idea es que aquí en el
tamaño mediano estos dos se muestren uno frente al otro.
Si recuerdas bueno no se puede aplicar directamente sobre el artículo desde el shifter porque nada más
afecta al primer nivel de hijos solamente las hay y el mail por lo tanto tengo que seleccionar este
íbamos a colocar un Miria Miria Minuit 7 6 8 pixeles y vamos a colocar contenido principal con display
Flex display Flex abrimos CROM y puede ser que si se coloca uno frente al otro ahora para tener la separación
aquí si recuerdas cada uno de estos es un artículo con una clase llamada entrada blog por lo tanto aquí
va a colocar entrada blog y voy a colocar un flex 0 0 para que tome mi base como su ancho Scarf 50 por
ciento menos 2 digamos así pero tengo que agregar content spaces between resguardamos cambios de nueva
cuenta y ahora si ya tenemos la separación y la columna de abajo se mantiene en la parte inferior.
Finalmente nos damos al tamaño más grande que vamos a trabajar con este Layout Shifter colocamos arroba
media Minuit 7 6 8.
Buenas quisiera decir de hecho 992 pixeles la Shifter y cambiamos nuestra dirección porque lo tenemos
como columnas es decir de arriba hacia abajo pero en este caso de ver de izquierda a derecha la x dirección
tiene que ser Rou guardamos cambio si el que se coloca esta forma y algo muy importante es que cuando
trabajas con Flex Box tú defines una dirección ya sea columna Harrow mientras que en Grit tienes acceso
a las dos a las dos líneas tienes acceso roya columna al mismo tiempo uno es unidimensional en este
caso Flex Box otro trabaja en las dos dimensiones como vendría siendo Grit que de esta forma queremos
de este lado.
Por lo tanto Routh Rivers o la otra opción es colocar como Rou y aquí colocar seit Order y colocarlo
digamos dos guardamos cambios y pues el que se coloca del lado derecho entonces hay diferentes opciones
a mi me gusta más esta porque tal vez digo por qué dos existen diferentes formas de hacerlo si recuerdas
al momento en que colocas display Flex cada uno de los elementos digamos éste va a tener un uno y esto
va a tener un 2 si colocas este comodos pues este pasa a ser uno pero si colocas por ejemplo este contenido
principal
como menos uno también lo va a empujar hacia el lado izquierdo.
En realidad hay muchas formas de hacerlo pero creo yo que dos es mejor opción porque solamente tenemos
dos elementos que iba a ser aside con un orden 2 si lo coloca de este lado y este pasa a ser uno que
es el contenido principal algo que nos hace falta aquí es colocar digamos este contenido principal y
tendría que ser aquí en la parte inferior.
Voy a colocar arroba media width 9 9 2 píxeles y voy a seleccionar el contenido principal tenemos que
darle un ancho.
Por lo tanto Flex cero cero y agregarlo con Calc 66 puntos 6 por ciento menos RAM podría ser y voy a
mover este aceite hacia acá para que se vayan colocando conforme se ven en él en el html y aquí me falta
Flex cero cero Calc 33.3 por ciento menos dos RAM.
Si guardamos cambios abrimos Chrome y puede ser que nos hace falta la separación es por aquí arriba
contener stays between se va a agregar la separación y muy importante estos tienen que estar uno arriba
del otro.
Si recuerdas ese es el contenido principal que va a colocar display Block y eso ya nos va a colocar
uno arriba del otro por qué display Blok bueno porque si tuviéramos display Flex mejor dicho tenemos
display Flex actualmente pero eso va a colocarlos uno frente al otro puedes cambiar los blog y ya no
se aplica Flex wook sobre el padre que vendría siendo el semen que contienen los dos árticos entonces
puedes ver que si lo hacemos más pequeño tenemos las dos columnas arriba y abajo y aún más pequeño tenemos
la barra en la parte inferior y cada entrada en la parte superior entonces podés ver que en este caso
creo que es menos código con Flags Books aún así es una buena cantidad pero cualquier proyecto que genere
va a tener una buena cantidad de líneas en el siguiente video ya que hemos avanzado con el que es el
más complejo de todos.
Veamos los dos últimos mostly Fluid y también Tiny tweaks.
Así que vamos a relajarnos un poco los siguientes son más sencillos.
Así que continuamos en el siguiente video.