Estrategias de responsive: mostly fluid

En el minuto 5:51 se refiere a un width:100% y no 100px

Si alguien quiere el atajo para la estructura del main y de los 5 divs aquí la tiene.

main.container>div.c$*5

Responsive Web Design Patterns:

Mostly Fluid: El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las más anchas.

Column drop: En el caso de los diseños con varias columnas de ancho completo, durante el proceso de colocación de columnas éstas únicamente se colocan de forma vertical debido a que el ancho de la ventana es demasiado reducido para el contenido.

Layout shifter: El patrón Layout shifter es el más adaptable, ya que posee varios puntos de interrupción en diferentes anchos de pantalla.

Tiny tweaks: El patrón Tiny tweaks permite realizar pequeños cambios en el diseño, como ajustar el tamaño de la fuente, cambiar el tamaño de las imágenes o desplazar el contenido de maneras muy poco significativas.

Off canvas: En lugar de apilar contenido verticalmente, el patrón Off canvas coloca contenido menos usado (tal vez menús de navegación o de apps) fuera de la pantalla y solo lo muestra cuando el tamaño de la pantalla es suficientemente grande.

Patrones de diseño web adaptables

Amarán esta herramienta:

https://flexbox.help/

Me dan las gracias luego jajaja

Responsive Design significa adaptar tu diseño al tamaño de pantalla del dispositivo. Puedes hacerlo como tu quieras, pero existen 5 patrones ya definidos que te ayudarán en tu diseño. Sus nombre son:
Tiny Tweaks
Mostly Fluid
Column Drop
Layout Shifter
Off Canvas

Técnicas Responsive: Mostly Fluid:

Por si no quedó claro y solo para reafirmar, cuando necesitas aplicarle exactamente los mismos estilos a un elemento es cuando se usa la coma, de esa manera puedes seleccionar varios elementos a la vez para que se les apliquen los estilos que escribas ahí, y la especificidad trabajará para cada uno de manera independiente

Mostly Fluid consiste principalmente en una rejilla fluida. En pantallas grandes o medianas, generalmente permanece del mismo tamaño, simplemente ajustando los márgenes en pantallas más anchas.
En pantallas más pequeñas, la cuadrícula fluida hace que el contenido principal se reajuste, mientras que las columnas se apilan verticalmente. Una de las principales ventajas de este patrón es que normalmente solo requiere un punto de interrupción entre las pantallas pequeñas y las pantallas grandes.

por si quieren ver algunos otros patrones :
/

.
PD: las veremos mas adelante ✌💚

Por default visual studio code y algunos otros id’s de desarrollo tienen un plugin que se conoce como emmet, este magnifico plugin permite crear estructuras mucho mas rapido.

por ejemplo:

si escribes

div.c$*5

y presionas tab obtienes la estructura de las 5 cajas contenidas en el container de una sola vez

Comparto un artículo sobre los patrones de diseño web adaptables con algunos ejemplos: https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=es

veo que en el min 5:50, Diego mencionó pixeles, pero en realidad es porcentaje para que tengan cuidado en su código 😃

Para generar el main y los 5 contenedores usar Emmet

main.container>div.item$*5

Notas de la clase

https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=es

Recomiendo esta página. https://mediaqueri.es/
Muestra como utilizar mediaqueri por medio de ejemplos que estan allí. :3

Cuando yo empecé a hacer mi primera pagina web, primero empecé por la pc y después ya por el móvil. Realmente el hacer ese proyecto fue una pesadilla, cualquier cosita que movía rompía otra. Al final pude acabar el proyecto y ahora que estoy aprendiendo sobre esto, se que me será de mucha ayuda.

Si quieren evitar copiar y pegar el div para tener 5 lo que pueden hacer en Visual Studio Code es poner div*5 y apretar tab.

/* selector universal */
/* El box sizing lo que hace es calcular automaticamente el tamaño del elemento incluyendo el padding y el border
no aplica para el margin*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/* selector universal */
html {
    font-size: 62.5%;
}
.container {
    display: flex;
    flex-wrap: wrap;
}

.c1, .c2, .c3, .c4, .c5 {
    width: 100%;
    min-width: 150px;
    height: 150px;
}

.c1 {
    background-color: cadetblue;
}
.c2 {
    background-color: rgb(124, 160, 95);
}
.c3 {
    background-color: rgb(95, 101, 160);
}
.c4 {
    background-color: rgb(160, 95, 151);
}
.c5 {
    background-color: rgb(170, 136, 85);
}

Para copiar y pegar elementos o líneas de código más rápido pueden usar Alt+Shift+↓

Por si algunos se confundieron con lo de “px” lo pueden hacer de esta forma:
.c1, .c2, .c3, .c4, .c5{
width: 100%;
min-width: 15rem ;
height: 15rem;
}

Mobile First - Mostly Fluid

Empezamos con el responsive Mostly fluid

**Resultado: **

Codigo HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iJCode - Mostly fluid</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main class="container">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <div class="c4"></div>
      <div class="c5"></div>
    </main>
  </body>
</html>

Codigo CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.c1,
.c2,
.c3,
.c4,
.c5 {
  width: 100%;
  min-width: 150px;
  height: 150px;
}

.c1 {
  background-color: #204051;
}
.c2 {
  background-color: #3b6978;
}
.c3 {
  background-color: #64958f;
}
.c4 {
  background-color: #84a9ac;
}
.c5 {
  background-color: #e4e3e3;
}

dejo mi codigo
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>
<title>documento</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<main class=“container”>
<div class=“C1”></div>
<div class=“C2”></div>
<div class=“C3”></div>
<div class=“C4”></div>
</main>
</body>
</html>

*{
box-sizing: border-box;
margin:0;
padding:0;
}
html{
font-size: 62.5%;
}
.container{
display: flex;
flex-wrap:wrap;
}
.C1, .C2, .C3, .C4{
width: 100%;
min-width: 150px;
height: 150px;
}
.C1{
background-color: blue;
}
.C2{
background-color: blueviolet;
}
.C3{
background-color: brown;
}
.C4{
background-color: chartreuse;
}

 .c1
        {
            background: #003476;
        }
        .c2
        {
            background: #0062d2;
        }
        .c3
        {
            background: #b4d2f7;
        }
        .c4
        {
            background: #d5dfef;
        }
        .c5
        {
            background: #fde1e5;
        }

Respnsive Design Es la adaptación de un diseño al tamaño de la pantalla del dispositivo. Existen 5 patrones:

• Tiny Tweaks: Se basa en una sola columna para el contenido.
• Mostly Fluid: Consiste en tener una grilla de tamaño flexible. Según se crezca la pantalla, los distintos bloques se agrupan ocupando todo el espacio disponible.
• Column Drop: Consiste en que cada bloque de contenido, que en un smartphone vemos filas, vaya formando columnas según vaya siendo más grande la pantalla del dispositivo.
• Layout shifter: Consiste en mover los bloques de contenido cambiando totalmente el Layout.
• Off Canvas: Este patrón esconde contenido en la pantalla y únicamente es visible si realizamos determinada acción. Generalmente el contenido oculto es un menú de navegación.

Dejo un enlace para que puedan profundizar con ejemplos más prácticos.

.c$*5
Para creal los 5 <div class=“c1”</div>

Patrones de maquetacio Responsive Disign

Noa ayudan a construir proyectos que esten hechos de mobile first hast desktop.

• Mostly fluid: Se inicia con columnas, una vez que empieza a creer a una tablet reacomodamos los elementos.

45.-Estrategias de responsive: mostly fluid

Estos son de los 3 patrones más usado en la industria.

• Mostly Fluid: Iniciamos con columnas y en el momento en el que empieza a crecer a una tablet empezamos a reacomodar las columnas (probablemente el header se quede igual), si cambiamos la orientación de la tablet (la ponemos horizontalmente) podemos reacomodar otra vez parte de los contenedores, y si nos vamos a una desktop o laptop ya tendríamos la vista total donde están todos los contenedores por importancia.

Artículo sobre abreviaturas emmet: https://docs.emmet.io/abbreviations/syntax/

Mostly Fluid: iniciamos con columnas y al momento que empieza a crecer a una Tablet vamos a empezar a reacomodar las columnas, posiblemente el header se va quedar igual, que ocupe el 100% del width, pero puede ser que dos contenedores puedan partirse a la mitad y tengamos un contenedor central o principal que tenga todo el contenido. Si cambiamos la orientación de la Tablet podemos reacomodar otra vez parte de los contenedores y si nos vamos a una desktop o a una laptop ya tendríamos como la vista total en donde tenemos todos los contenedores reacomodados por importancia.

Puedes probar los distintos patrones de maquetación Responsive Design haciendo click en cada uno a continuación (No olvides activar el inspector de elementos en Mobile-only):
.
1.- Mostly Fluid.
2.- Colocación de Columnas (Column Drop).
3.- Layout Shifter
4.- Tiny tweaks
5.- Off canvas

En Visual Studio Code si colocan div*5 y le dan enter o tab se les crearan 5 contenedores div

**abbreviations syntax **
main.container>div.c$*5

<main class=“container”>
<div class=“c1”></div>
<div class=“c2”></div>
<div class=“c3”></div>
<div class=“c4”></div>
<div class=“c5”></div>
</main>

Resumen del Capitulo en Notion
https://acortar.link/C184W

Mi codigo

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{

    font-size: 62.5%;
}

container{
    display: flex;
    flex-wrap: wrap;
}

.c1,.c2,.c3,.c4,.c5{

    width: 100%;
    min-width: 150px;
    height: 150px;
}

.c1{
    background-color: aqua;
}

.c2{

background-color: blue;
}

.c3{

    background-color: chartreuse;

}

.c4{

    background-color: crimson;
}
.c5{

    background-color:dimgrey;
}

Que interesante el uso de flex-wrap . facilita mucho el diseño resposivo-

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
.container {
    display: flex;
    flex-wrap: wrap;
}
.c1, 
.c2, 
.c3, 
.c4, 
.c5 {
    width: 100%;
    min-width: 150px;
    height: 150px;
}
.c1 {
    background-color: blueviolet;
}
.c2 {
    background-color: cadetblue;
}.c3 {
    background-color: darkgoldenrod;
}
.c4 {
    background-color: darkmagenta;
}
.c5 {
    background-color: red;
}

MOSTLY FLUID. se inicia con columnas y al momento de que se crece en una tablet se reacomodan las columnas, tambien cambia en la vista horizontal de la tablet y el la version desktop reacomondando los elementos.

Para quienes estén usando VSCode, existe una funcionalidad llamada emmet que nos permite agilizar la construcción de estructuras en HTML.
Por ejemplo: Cuando tenemos que crear múltiples veces el mismo elemento podemos escribir lo siguiente y presionar tab

elemento*n

Esto nos creara el “elemento” “n” veces.
Y, si ademas, tenemos que poner clases numeradas para cada uno de esos elemento podemos usar la siguiente sintaxis:

elemento.clase$*n

Esto nos creara “n” veces el “elemento” con la “clase$”, donde $ sera remplazado por el numero del elemento.
A modo de ejemplo:

div.c$*5

Esto nos creara 5 elementos div donde cada uno tendrá una clase “c” desde “c1” hasta “c5” que son la cantidad de elementos div que tenemos.
Espero que esto le sea de ayuda a alguien, ¡Saludos!

Hola que tal, me podrían recordar que función tiene ** border-box** y sus valores ?

Gracias

No seria mejor hacer una clase BOX y asi poder darle estos atributos de tamano y flex a nuestras cajas para no tener que seleccionar una clase una por una?

Un buen truco en VS Code, es que si necesistan colocar varias etiquetas de la misma, pueden hacer div(la cantidad que desean)* y se les genera automaticamente.

Y si necesitan anidar varias etiquetas que desean repetir, puedes utilizar el signo “>”, puede generar 5 div con <p>, haciendo div*5>p.

Me apasiona las buenas prácticas que vamos aprendiendo de la mano con la experiencia de David, sin duda alguna da la obligación de trabajar como un profesional y escribiendo siempre código limpio y en base a buenos estándares. Este es sin duda alguna, uno de los cursos que más necesitaba y que he disfrutado mucho.

Mostly Fluid
El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las pantallas más anchas.

En las pantallas más pequeñas, la cuadrícula fluida genera el reprocesamiento del contenido principal, mientras que las columnas se apilan verticalmente. Una de las mayores ventajas de este patrón es que, en general, solo se necesita un punto de interrupción entre las pantallas grandes y las pequeñas.

En vez de poner todos los box c1, c2, c3… {}
podian poner en cada clase una clase para todos los box, por ejemplo
<div class=“c1 c”>
<div class=“c2 c” > y asi solo se pone de clase .c para no modificar poniendo el nombre de todos los box.

Esta es la parte que mas me gustaa, al fin… 😃

Una consulta que no me quedó del todo claro.
Rem solo lo usa para los font-size? Porque veo que en los div usa px.
Saludos

Excelente clase para repasar algunos temas y poder aplicarlo algunos proyectos.

Ahora si viene lo bueno!!

A alguien mas le paso que visual studiocode no acepta el codigo de .c1, .c2 … alguien me puede ayudar? gracias de antemano

excelente video no sabia que existian patrones de diseño para responsive web design

Mostly fluid: Existen diferentes estrategias para trabajar el responsive. La más recomendada actualmente es la mobile first. Esta nos invita a desarrollar desde un dispositivo mobile y luego ir escalando a dispositivos mayores. El orden que normalmente se maneja es: mobile, tablet, desktop.

pueden ver la version mobile como en el video presionando este icono en su navegador!!

yo aquí x 3 vez ! xD

Nice!

Para poder manipular el ancho y alto de la pantalla como lo hace el profe tienen que darle en responsive design

RESUMEN CLASE 45:
ESTRATEGIAS DE RESPONSIVE
MOSTLY FLUID

Patrones de maquetación
Responsive Design

I.- Mostly Fluid

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mostly Fluid</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <main class="container">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </main>
</body>

</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.c1,
.c2,
.c3,
.c4,
.c5 {
    width: 100%;
    min-width: 150px;
    height: 150px;
}

.c1 {
    background-color: #003476;
}

.c2 {
    background-color: #0062d2;
}

.c3 {
    background-color: #b4d2f7;
}

.c4 {
    background-color: #d5dfef;
}

.c5 {
    background-color: #dfe1e5;
}

Información resumida de esta clase
#EstudiantesDePlatzi

• Con flex-wrap los contenedores se ajustan a medida el tamaño del viewport este cambiando

• Podemos llamar diferentes contenedores en CSS al mismo tiempo separándolos por una como

Este documento hará que convivas más facilmente con vStudio Code

https://medium.com/neverrest/vs-code-emmet-abbreviations-and-snippets-make-your-life-easier-875505550607

Diego De Granda es lo que se llama un verdadero maestro!!!

Hola gente vengo del futuro y vine a traerte mis apuntes para que entiendas bien las siguientes clases, creeme, es dificil encontrar esta info.
.
Patrones de maquetación de Responsive Desing:

En resumen son los estilos que están estandarizados en la industria para ordenar nuestras páginas, o más concretamente nuestros contenedores.
.

• Mostly Fluid: El patrón Mostly fluid consiste, principalmente, contenedores posicionados en secciones verticales para el formato mobile, cuando trabajamos este formato en Tablets, laptos y pc’s comenzamos a reacomodar los contenedores en un diseño multicolumna. Por lo que he visto en los dispositivos más pequeños como tables y laptos pequeñas el diseño contiene con una columna principal que se mantiene siendo una sola columna (abarcando el ancho de toda la pantalla), ahí se posiciona el contenedor principal, mientras los contenedores secundarios pasa a encontrarse en un diseño multi-columnas (dos o tres contenedores en una sola columna), en el tercer escalón es posible que haya otro contenedor que ocupe una sola comuna. Mientras más ancha es la pantalla (escritorio y laptos más grandes), todos los contenedores pueden pasar a estar un también un diseño multi-columnas.
  .
  

  
  .

• Layaut Shifter: En las pantallas más pequeñas, el contenido se apila verticalmente, pero cambia considerablemente a medida que se agranda la pantalla, con un div a la izquierda y dos div apilados a la derecha, eso será cuando estemos en laptos pequeñas o tablets. si hablamos de pantallas más grandes entonces es posible que el diseño cambie y pasen a ser tres columnas, donde hay una columna grande vertical a la izquierda, una columna con dos contenedores, y una última columna grande vertical a la derecha. Este es uno de los diseños más complejo de mantener, y es posible que se deban realizar cambios dentro de los elementos, no solo en el diseño de contenido general.
  .
  

  .

• Column Drop: en este diseño siempre le daremos importancia al contenedor principal. Como ves en las imágenes, para móviles usaremos un formato donde el contenedor principal ocupa toda la pantalla, y si el usuario baja encontrará los demás contenedores uno debajo de otro, ocupando todos el ancho de la pantalla. En tables y en laptos pequeñas solo se estirarán los contenedores. En laptos con una pantalla mediana ya usaremos un formato multicolumnas, donde una de los contenedores secundarios pasará a estar complementando al contenedor principal, el contenedor secundario estará a la izquierda, ocupando un 30% o 25% de la pantalla, el resto lo ocupará en contenedor principal, abajo de estos dos contenedores estará el tercer contenedor. Y ya pantallas grandes al formato le agregaremos una tercera columna a la derecha donde estará otro contenedor secundario pero nuestro contenedor principal no perderá relevancia, seguirá ocupando un porcentaje importante de nuestra pantalla, 2 cuartas partes aproximadamente.
  .
  

  

para el tema de los colores: https://color.adobe.com/es/create/color-wheel

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./desafio-style.css">
    <title>Desafio Responsive</title>
</head>

<body>
    <header class="container-header">
        <div>
            <h1>Headear</h1>
        </div>
    </header>
    <main class="container-main"> 
        <div class="div1">
            <p>Texto div1</p>
        </div>
        <div class="div2">
            <p>Texto div2</p>
        </div>
        <div class="div3">
            <p>Texto div3</p>
        </div>
        <div class="div4">
            <p>Texto div4</p>
        </div>
        <div class="div5">
            <p>Texto div5</p>
        </div>    
    </main>
    <footer>
        <div class="container-footer">
            <h1>Footer</h1>
        </div>
    </footer>
</body>

</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

.container-main {
    display: flex;
    flex-wrap: wrap;
}

.container-header,
.container-footer,
.div1,
.div2,
.div3,
.div4,
.div5 {
    width: 100%;
    min-width: 150px;
    height: 150px;
}

.container-header {
    background-color: rgb(154, 161, 138)
}

.div1 {
    background-color: aquamarine;
}

.div2 {
    background-color: blue;
}

.div3 {
    background-color: cadetblue;
}

.div4 {
    background-color: blueviolet;
}

.div5 {
    background-color: rgb(150, 23, 58);
}

.container-footer {
    background-color: chocolate;
}

p,
h1 {
    font-size: 5rem;
    text-align: center;
}


@media (max-width: 600px) {

    p,
    h1 {
        font-size: 2.5rem;
        text-align: center;
    }

    .div1 {
        background-color: chartreuse;
    }
}

@media (min-width: 600px) {

    .div2,
    .div3,
    .div4,
    .div5 {
        width: 50%;

    }
}

Esta es una extensión de Google, permite revisar o simular diferentes pantallas de la página que desees.

Link de instalación: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

Es sencilla de utilizar, la instala, luego cuando abras tu proyecto vas hacia la parte superior derecha y buscas la extensión y la ejecutas estando en la página que quieras verificar.

PATRONES DE MAQUETACION RESPONSIVE DESING
Existen tres principales patrones de maquetación mas usados en la industria

• Mostly Fluid .- Nos permite redimensionar las columnas o contenedores de acuerdo a las dimensiones de la pantalla

Pd: si quieren generar contenedores repetidos mas rapido, simplemente colóquense en la etiqueta que quieran crecr y luego Alt+Shift+flecha abajo y se iran repitiendo las etiquetas

El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las más anchas.

minuto 5:50

width: 100%;

Para muchas de las cosas repetitivas que hace, se pueden usar programas como Emmet, este viene incluido en Visual Studio Code,o simplemente VSCode, basicamente con una seria de caracteres, el lo convierte en HTML valido.
Por ejemplo, lo que nos enseño al principio, de que esto

!

Pase a ser esto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Es una funcion de Emmet.

Los mas utiles, segun mi criterio serian
Clases
div.container:

<div class="container>

ID
div#container

<div id="container>

Multiples
div*5

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Multiples con clases
div*5.container

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

Hijos
ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Hermanos
figure>img+figcaption

<figure>
    <img src="" alt="">
    <figcaption></figcaption>
</figure>

Usando lo aprendido podemos remplazar esto:

.c1, .c2, .c3, .c4, .c5 {
	...
}

Con un child selector :

.container > div {
	...
}


GRACIAS

¿Qué significa main query?

impresionante

que guay valorar lo simple
:hear

Patron Mostly Fluid

Wao 😮

el display y el flex-wrap son indispensables al momento de manejas estrategias responsive

Hola este es mi aporte.

HTML

CSS

👌

Este sería un layout implementando Mobile First

Responsive Web Design

Gran complemento a toda la información que se presenta en los siguientes capítulos que corresponden al Responsive Design.

No olvidar practicar con los REM.
En el min-width: 15rem, height: 15rem.

Siempre he dicho que el reto mas grande que tengo y superare sera el de diseño y maquetación. Mi lado artístico es inexistente en ese sentido

Gracias profesor.

hola el box-sizing: border-box siempre evita el scroll horizontal? o algo hice mal xD

Para poder hacer el ejercicio no bastó con un display flex, primero le tuve que agregar un inline-block, alguien sabe porqué ocurre esto?

.container
{
    display: inline-block flex;
    flex: wrap; 
}