[#525]: Add image to extra example

Lemoncode · Apr 22, 2023 · 0e939dd · 0e939dd
1 parent 11428b5
commit 0e939dd
Show file tree

Hide file tree

Showing 10 changed files with 11 additions and 11 deletions.
diff --git a/01-layout/02-flexbox/07-justify-align/README.md b/01-layout/02-flexbox/07-justify-align/README.md
@@ -8,8 +8,8 @@ Vamos a ver que el posibilidades nos ofrece flexbox:
 <body>
   <div id="flex-container">
     <div class="box" id="box1">BOX 1</div>
-    <div class="box" id="box2">BOX 1</div>
-    <div class="box" id="box3">BOX 1</div>
+    <div class="box" id="box2">BOX 2</div>
+    <div class="box" id="box3">BOX 3</div>
   </div>
 </body>
 ```
@@ -110,9 +110,9 @@ Vamos a crear una nueva row:
 ```diff
 <div id="flex-container">
   <div class="box" id="box1">BOX 1</div>
-  <div class="box" id="box2">BOX 1</div>
-  <div class="box" id="box3">BOX 1</div>
-+ <div class="box" id="box4">BOX 1</div>
+  <div class="box" id="box2">BOX 2</div>
+  <div class="box" id="box3">BOX 3</div>
++ <div class="box" id="box4">BOX 4</div>
 </div>
 ```
 

diff --git a/01-layout/02-flexbox/12-extra/README.md b/01-layout/02-flexbox/12-extra/README.md
@@ -53,7 +53,7 @@ Y ¿Por que se deforman? Vamos a evitarlo
 main {
   background-color: chocolate;
   flex: 1;
-+ align-item: center;
++ align-items: center;
 }
 ```
 
@@ -63,7 +63,7 @@ Bueno vamos bien, pero el scroll nos indica que las imagenes son mas grandes que
 main {
   background-color: chocolate;
   flex: 1;
-  align-item: center;
+  align-items: center;
 + overflow: auto;
 }
 ```
@@ -74,7 +74,7 @@ main {
 main {
   background-color: chocolate;
   flex: 1;
-  align-item: center;
+  align-items: center;
   overflow: auto;
 + flex-wrap: wrap;
 }
@@ -86,7 +86,7 @@ Vale...y ahora vamos a darle espacio de separacion a cada elemento:
 main {
   background-color: chocolate;
   flex: 1;
-  align-item: center;
+  align-items: center;
   overflow: auto;
   flex-wrap: wrap;
 +  gap: 5px
@@ -99,7 +99,7 @@ Y ahora centramos los elementos en el eje principal.
 main {
   background-color: chocolate;
   flex: 1;
-  align-item: center;
+  align-items: center;
   overflow: auto;
   flex-wrap: wrap;
   gap: 5px;
@@ -113,7 +113,7 @@ Y por ultimo vamos a evitar que tengamos tango espacio vacio. Para ello lo centr
 main {
   background-color: chocolate;
   flex: 1;
-  align-item: center;
+  align-items: center;
   overflow: auto;
   flex-wrap: wrap;
   gap: 5px;

diff --git a/01-layout/02-flexbox/12-extra/content/landscape-a.jpg b/01-layout/02-flexbox/12-extra/content/landscape-a.jpg
diff --git a/01-layout/02-flexbox/12-extra/content/landscape-b.jpg b/01-layout/02-flexbox/12-extra/content/landscape-b.jpg
diff --git a/01-layout/02-flexbox/12-extra/content/landscape-c.jpg b/01-layout/02-flexbox/12-extra/content/landscape-c.jpg
diff --git a/01-layout/02-flexbox/12-extra/content/landscape-d.jpg b/01-layout/02-flexbox/12-extra/content/landscape-d.jpg
diff --git a/01-layout/02-flexbox/12-extra/content/landscape-e.jpg b/01-layout/02-flexbox/12-extra/content/landscape-e.jpg
diff --git a/01-layout/02-flexbox/12-extra/content/landscape-f.jpg b/01-layout/02-flexbox/12-extra/content/landscape-f.jpg
diff --git a/01-layout/02-flexbox/12-extra/content/landscape-g.jpg b/01-layout/02-flexbox/12-extra/content/landscape-g.jpg
diff --git a/01-layout/02-flexbox/12-extra/content/landscape-h.jpg b/01-layout/02-flexbox/12-extra/content/landscape-h.jpg