Vamos a darle estilos a nuestro diseño y puedes ver que por ejemplo tenemos esta parte de aquí el contenido
principal que es el block más grande la barra lateral un poco más pequeña y si hacemos más pequeño esto
toma todo el espacio disponible en la parte inferior tenemos el blog sabemos cómo hacer algo así con
Flex Box nos dará un poco de scroll pues es el que tenemos aquí el contenido principal y luego tenemos
un main con la clase de blog y una sala con la clase de cursos por lo tanto aquí abajo vamos a colocar
contenido principal principal John y ponemos contenido principal y aquí vamos a colocar el siguiente
código vamos a ponerle un display Flex display Flex.
Eso va a colocar uno frente al otro de esta forma puede ser que cada uno frente al otro.
Pero vamos a enfocarnos primero en el dispositivo pequeño más pequeño hacer esto un poco así acá para
poder hacer que cada elemento tome el 100 por ciento vamos a utilizar por ejemplo blog elemento y Sidebar
también que no es 6/10 cursos entonces vamos a poner aquí cursos.
Recuerdas anteriormente hemos visto Flex Grow que por ejemplo puedes poner como cero Flex stream para
que se haga pequeño también cero y Flex Basis digamos 100 por ciento si guardas cambios puedes ver que
se ve bien nuestro blog toma todo el espacio disponible y se ve bastante bien.
Ahora si haces scroll hasta abajo tal vez digas Vanni donde están los talleres que se fueron.
Si haces scroll hacia un lado bueno hasta los talleres tomando todo el espacio disponible gracias al
Flex Basis.
Bueno este scroll hacia un lado nunca se debe detener salvo que así sea el diseño pero se soluciona
con un flex Rupp Group.
Eso lo va a colocar abajo y así hacer scroll más trabajo.
Entonces se va viendo bien.
Ahora por ejemplo puedes ver que después de Flex duro y Frink usualmente por ejemplo si no tuviéramos
este un flex Grade 1 haría que ambos crecieran al mismo nivel.
Puedes ver que crecen en este caso por ejemplo no afecta si es uno cero o ambos porque tenemos una base
de 100 Tomato el espacio que haya disponible y no les permite que crezcan o que se hagan más pequeños
en esa parte.
Tal vez no haga mucho sentido pero puede ser que tenemos estos tres parámetros.
Estos tres pueden ser cambiados de una cuenta por Flex y en este orden el primero vendría siendo el
grog el segundo vendría siendo el Frink espacio y luego el cero.
Y el tercero es la base esto y estos tres es lo mismo pues es el que nos da un resultado adecuado ahora
otra cosa puedes ver que en este diseño que no toma todo el espacio hasta la orilla.
A mí no me gusta que tome todo el espacio hasta la orilla porque se presta a esto que está aquí por
ejemplo que el texto esté en la esquina.
Lo complica un poco de ver.
Podremos abrir el contenedor y por ejemplo ponerle un width del 95 por ciento y eso lo va a centrar
un poco a decir ok.
No voy a tomar el 100 solamente el 95 y deja un pequeño margen eso beneficia lo que viene siendo la
lectura se ve mucho mejor y puedes ver qué sencillo lo pudimos solucionar ahora si vemos el diseño final
puede ser que los talleres aparecen arriba eso se logra gracias a Flex Books porque puedes ver que el
contenedor padre de ambos es decir este contenedor principal rodea tanto el main como rodea las tenemos
display Flex.
Gracias a eso le podemos poner aquí por ejemplo blog o cursos digamos y ponerle un orden de menos 1
eso va a hacer que se muestre cursos primero y después blogging y de esa forma puedes cambiar el orden
sin necesidad de estar cambiando el HTML anteriormente algo así solamente era posible con JavaScript
de leer una porción de HTML y cortarlo inyectarlo en otras partes ya se puede con Flex Box.
De esta forma tan sencilla.
Ahora si lo hacemos grande tendremos que hacer ajustes aquí porque ya lo vimos el móvil se ve bien.
Ahora vamos a ir a la parte más grande de Nueva cuenta a nuestros MQ y aquí vamos a hacer 768 píxeles
recuerda puede ser cualquier tamaño pero lo voy a aprender.
La tablet contenido principal y este contenido principal es el que ya tiene display Flex.
Por lo tanto puedo utilizar directamente yo estoy contén Espais Vitamin guardamos cambios puede ser
que de esta forma la base sigue siendo 100 por ciento pero eso se queda de esta forma.
Por lo tanto vamos a generar esos electores uno para el blog y uno para los cursos primero vamos a empezar
con el blog vamos a ponerle puedes ver que ya tengo aquí Fleck cero cero.
Si lo habíamos puesto como 1 y 1 ahí sí tendríamos que hacer cambios pero eso que lo dejé como cero
cero a pesar de que no haría ningún cambio en el dispositivo pequeño puede que uno uno aquí no no significa
ningún cambio pero en un dispositivo un poco más grande si era necesario el cero a cero por eso los
dejé como cero cero para solamente reescribir la base con Flex Basis CALC.
Bueno a ser 66 .6 por ciento tomé tres cuartas partes y después lo que viene siendo cursos va a tomar
Flex Basis Calc 33.3 por ciento menos cuatro RAM tenga un poco de separación.
Si guardamos cambios que de esta forma ahora queda lo que es la barra del lado izquierdo y el bloque
del lado derecho.
En cursos tenemos que ponerla aquí por ejemplo o incluso en blog podrías ponerle orden al menos 1 y
eso lo va a empujar hacia la izquierda o por ejemplo aquí incursos ponerle Order ponerle 2 y eso es
exactamente lo mismo y puedes ver lo bien que se ve en nuestro blog si lo hacemos pequeño puedes ver
que se queda bastante bien fluye bastante bien el contenido y tenemos un sitio web totalmente responsivo.
De nueva cuenta puedes ver que no tenemos por ejemplo aquí display reflex no tenemos que volver a declarar
el valor se hereda automáticamente gracias a 6S y dependiendo del Miyake y lo que quieras hacer es lo
que escribes únicamente esa parte a continuar el siguiente vídeo con la parte del blog darle algunos
estilos y otras formas por ejemplo te mostraré un layout opcional para que veas como lo puedes hacer.
Así que veamos el siguiente vídeo.