Skip to content

Commit a101b6b

Browse files
fdejesusmazzonifdejesusmazzoni
authored
Merge pull request #527 from Lemoncode/#525-layout-flexbox
#525 layout flexbox
2 parents 0a26a4e + 11428b5 commit a101b6b

File tree

36 files changed

+1436
-968
lines changed

36 files changed

+1436
-968
lines changed

‎01-layout/02-flexbox/00-previous-concepts/README.md

+230
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
# Previous concepts
2+
3+
## Overload
4+
5+
Vamos a ver un simple ejemplo para entender como funciona overload.
6+
7+
Creamos el siguiente _html_
8+
9+
```html
10+
<!DOCTYPE html>
11+
<html lang="en">
12+
<head>
13+
<meta charset="UTF-8">
14+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
15+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
16+
<title>Document</title>
17+
<link rel="stylesheet" type="text/css" href="./style.css" />
18+
</head>
19+
<body>
20+
<div class="small-container">
21+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
22+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
23+
</div>
24+
</body>
25+
</html>
26+
```
27+
28+
Y el css
29+
30+
```css
31+
.small-container {
32+
width: 200px;
33+
height: 200px;
34+
border: 1px solid black;
35+
}
36+
```
37+
38+
Ahora vemos como el texto es mayor que el contenedor podemos jugar de varias formas.
39+
40+
Primero ocultamos lo que sobresale del texto:
41+
42+
```diff
43+
.small-container {
44+
width: 200px;
45+
height: 200px;
46+
border: 1px solid black;
47+
+ overflow: hidden;
48+
}
49+
```
50+
51+
Segundo mostramos scroll para que se pueda desplazar y ver todo el contenido:
52+
53+
```diff
54+
.small-container {
55+
width: 200px;
56+
height: 200px;
57+
border: 1px solid black;
58+
- overflow: hidden;
59+
+ overflow: scroll;
60+
}
61+
```
62+
63+
Podemos hacer que aparezca el scroll solo si es necesario
64+
65+
```diff
66+
.small-container {
67+
width: 200px;
68+
height: 200px;
69+
border: 1px solid black;
70+
- overflow: scroll;
71+
+ overflow: auto;
72+
}
73+
```
74+
75+
## Float
76+
77+
Limpiamos el _html_ y partimos de este:
78+
79+
```html
80+
<!DOCTYPE html>
81+
<html lang="en">
82+
<head>
83+
<meta charset="UTF-8" />
84+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
85+
<title>Document</title>
86+
<link href="./style.css" type="text/css" rel="stylesheet" />
87+
</head>
88+
<body>
89+
<div class="container">
90+
<img
91+
src="https://cdn.pixabay.com/photo/2020/04/13/13/27/animal-5038385_960_720.jpg"
92+
/>
93+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu
94+
fringilla neque, nec maximus magna. Integer facilisis ex massa, vel
95+
iaculis erat finibus in. Nunc sapien justo, fringilla luctus risus
96+
rhoncus, mollis aliquam est. Quisque cursus massa non arcu pulvinar
97+
ultricies. Morbi eget quam et ante tempor congue. Phasellus ac tortor leo.
98+
Suspendisse finibus rhoncus ipsum, at ultrices dui faucibus eget. Nunc
99+
mauris lectus, mattis vel ex eget, maximus consectetur orci. Morbi nulla
100+
est, pretium quis lobortis in, viverra a arcu. Vivamus vehicula nisl sed
101+
quam elementum faucibus. Vestibulum semper tristique lectus. Proin congue
102+
diam ut enim sagittis feugiat. Duis ornare tortor vel euismod accumsan.
103+
Etiam eu mauris ac nisl iaculis cursus. Sed bibendum elit sit amet
104+
suscipit sagittis. Nulla felis risus, auctor ut tellus pellentesque,
105+
pellentesque sollicitudin lacus. In dignissim bibendum erat nec
106+
pellentesque. Donec a ligula lacinia, laoreet tellus a, sagittis mauris.
107+
pretium.
108+
</div>
109+
</body>
110+
</html>
111+
```
112+
113+
Y creamos este css
114+
115+
```css
116+
.container {
117+
border: 1px solid black;
118+
padding: 15px;
119+
}
120+
121+
.container img {
122+
width: 245px;
123+
margin: 5px;
124+
}
125+
```
126+
127+
Ahora queremos que la imagen se situe a la izquierda del texto. Podemos usar la propiedad _float_
128+
129+
```diff
130+
.container {
131+
border: 1px solid black;
132+
padding: 15px;
133+
}
134+
135+
.container img {
136+
+ float: left;
137+
width: 245px;
138+
margin: 5px;
139+
}
140+
```
141+
142+
Que pasa? La imagen queda fuera del contenedor. Como lo solucionamos?
143+
144+
Primera aproximación modificamos el _html_
145+
146+
```diff
147+
<div class="container">
148+
<img
149+
src="https://cdn.pixabay.com/photo/2020/04/13/13/27/animal-5038385_960_720.jpg"
150+
/>
151+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu
152+
fringilla neque, nec maximus magna. Integer facilisis ex massa, vel
153+
iaculis erat finibus in. Nunc sapien justo, fringilla luctus risus
154+
rhoncus, mollis aliquam est. Quisque cursus massa non arcu pulvinar
155+
ultricies. Morbi eget quam et ante tempor congue. Phasellus ac tortor leo.
156+
Suspendisse finibus rhoncus ipsum, at ultrices dui faucibus eget. Nunc
157+
mauris lectus, mattis vel ex eget, maximus consectetur orci. Morbi nulla
158+
est, pretium quis lobortis in, viverra a arcu. Vivamus vehicula nisl sed
159+
quam elementum faucibus. Vestibulum semper tristique lectus. Proin congue
160+
diam ut enim sagittis feugiat. Duis ornare tortor vel euismod accumsan.
161+
Etiam eu mauris ac nisl iaculis cursus. Sed bibendum elit sit amet
162+
suscipit sagittis. Nulla felis risus, auctor ut tellus pellentesque,
163+
pellentesque sollicitudin lacus. In dignissim bibendum erat nec
164+
pellentesque. Donec a ligula lacinia, laoreet tellus a, sagittis mauris.
165+
pretium.
166+
+ <div class="cleared"></div>
167+
</div>
168+
```
169+
170+
Y ahora le damos estilos a _cleared_
171+
172+
```diff
173+
...
174+
+.cleared {
175+
+ clear: both;
176+
+}
177+
```
178+
179+
No es elegante porque estamos mezclando responsabilidad. Introducimos un elemento html para solucionar un problema de css.
180+
181+
Otra solucion, utilizar pseudolemento:
182+
183+
```diff
184+
<div class="container">
185+
<img
186+
src="https://cdn.pixabay.com/photo/2020/04/13/13/27/animal-5038385_960_720.jpg"
187+
/>
188+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu
189+
fringilla neque, nec maximus magna. Integer facilisis ex massa, vel
190+
iaculis erat finibus in. Nunc sapien justo, fringilla luctus risus
191+
rhoncus, mollis aliquam est. Quisque cursus massa non arcu pulvinar
192+
ultricies. Morbi eget quam et ante tempor congue. Phasellus ac tortor leo.
193+
Suspendisse finibus rhoncus ipsum, at ultrices dui faucibus eget. Nunc
194+
mauris lectus, mattis vel ex eget, maximus consectetur orci. Morbi nulla
195+
est, pretium quis lobortis in, viverra a arcu. Vivamus vehicula nisl sed
196+
quam elementum faucibus. Vestibulum semper tristique lectus. Proin congue
197+
diam ut enim sagittis feugiat. Duis ornare tortor vel euismod accumsan.
198+
Etiam eu mauris ac nisl iaculis cursus. Sed bibendum elit sit amet
199+
suscipit sagittis. Nulla felis risus, auctor ut tellus pellentesque,
200+
pellentesque sollicitudin lacus. In dignissim bibendum erat nec
201+
pellentesque. Donec a ligula lacinia, laoreet tellus a, sagittis mauris.
202+
pretium.
203+
- <div class="cleared"></div>
204+
</div>
205+
```
206+
207+
y el css
208+
209+
```diff
210+
.container {
211+
border: 1px solid black;
212+
padding: 15px;
213+
}
214+
215+
+.container::after {
216+
+ content: "";
217+
+ display: block;
218+
+ clear: both;
219+
+}
220+
221+
.container img {
222+
float: left;
223+
width: 245px;
224+
margin: 5px;
225+
}
226+
227+
-.cleared {
228+
- clear: both;
229+
-}
230+
```

0 commit comments

Comments
 (0)