Skip to content

Commit 74a5edc

Browse files
fdejesusmazzonifdejesusmazzoni
authored
Merge pull request #528 from Lemoncode/#525-layout-flexbox
[#525]: Add image to extra example
2 parents a101b6b + 0e939dd commit 74a5edc

File tree

10 files changed

+11
-11
lines changed

10 files changed

+11
-11
lines changed

‎01-layout/02-flexbox/07-justify-align/README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ Vamos a ver que el posibilidades nos ofrece flexbox:
88
<body>
99
<div id="flex-container">
1010
<div class="box" id="box1">BOX 1</div>
11-
<div class="box" id="box2">BOX 1</div>
12-
<div class="box" id="box3">BOX 1</div>
11+
<div class="box" id="box2">BOX 2</div>
12+
<div class="box" id="box3">BOX 3</div>
1313
</div>
1414
</body>
1515
```
@@ -110,9 +110,9 @@ Vamos a crear una nueva row:
110110
```diff
111111
<div id="flex-container">
112112
<div class="box" id="box1">BOX 1</div>
113-
<div class="box" id="box2">BOX 1</div>
114-
<div class="box" id="box3">BOX 1</div>
115-
+ <div class="box" id="box4">BOX 1</div>
113+
<div class="box" id="box2">BOX 2</div>
114+
<div class="box" id="box3">BOX 3</div>
115+
+ <div class="box" id="box4">BOX 4</div>
116116
</div>
117117
```
118118

‎01-layout/02-flexbox/12-extra/README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Y ¿Por que se deforman? Vamos a evitarlo
5353
main {
5454
background-color: chocolate;
5555
flex: 1;
56-
+ align-item: center;
56+
+ align-items: center;
5757
}
5858
```
5959

@@ -63,7 +63,7 @@ Bueno vamos bien, pero el scroll nos indica que las imagenes son mas grandes que
6363
main {
6464
background-color: chocolate;
6565
flex: 1;
66-
align-item: center;
66+
align-items: center;
6767
+ overflow: auto;
6868
}
6969
```
@@ -74,7 +74,7 @@ main {
7474
main {
7575
background-color: chocolate;
7676
flex: 1;
77-
align-item: center;
77+
align-items: center;
7878
overflow: auto;
7979
+ flex-wrap: wrap;
8080
}
@@ -86,7 +86,7 @@ Vale...y ahora vamos a darle espacio de separacion a cada elemento:
8686
main {
8787
background-color: chocolate;
8888
flex: 1;
89-
align-item: center;
89+
align-items: center;
9090
overflow: auto;
9191
flex-wrap: wrap;
9292
+ gap: 5px
@@ -99,7 +99,7 @@ Y ahora centramos los elementos en el eje principal.
9999
main {
100100
background-color: chocolate;
101101
flex: 1;
102-
align-item: center;
102+
align-items: center;
103103
overflow: auto;
104104
flex-wrap: wrap;
105105
gap: 5px;
@@ -113,7 +113,7 @@ Y por ultimo vamos a evitar que tengamos tango espacio vacio. Para ello lo centr
113113
main {
114114
background-color: chocolate;
115115
flex: 1;
116-
align-item: center;
116+
align-items: center;
117117
overflow: auto;
118118
flex-wrap: wrap;
119119
gap: 5px;

‎01-layout/02-flexbox/12-extra/content/landscape-a.jpg

59.7 KB
Loading

‎01-layout/02-flexbox/12-extra/content/landscape-b.jpg

176 KB
Loading

‎01-layout/02-flexbox/12-extra/content/landscape-c.jpg

211 KB
Loading

‎01-layout/02-flexbox/12-extra/content/landscape-d.jpg

252 KB
Loading

‎01-layout/02-flexbox/12-extra/content/landscape-e.jpg

184 KB
Loading

‎01-layout/02-flexbox/12-extra/content/landscape-f.jpg

231 KB
Loading

‎01-layout/02-flexbox/12-extra/content/landscape-g.jpg

36.6 KB
Loading

‎01-layout/02-flexbox/12-extra/content/landscape-h.jpg

194 KB
Loading

0 commit comments

Comments
 (0)