Indice
- Capítulo 1 Ejercicios básicos de Flexbox: Flex-direction
- 1.1 flex-direction: row
- 1.2 flex-direction: row-reverse
- 1.3 flex-direction: column
- 1.4 flex-direction: column-reverse
1.- Ejercicios básicos de Flexbox: Flex-direction
1.1.- flex-direction: row
.container1 {
display: flex;
background-color: aquamarine;
border: 2px solid #000;
flex-direction: row;
margin: 50px;
}
1
2
3
1.2.- flex-direction: row-reverse
.container2 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row-reverse;
}
1
2
3
1.3.- flex-direction: column
.container3 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: column;
}
1
2
3
1.4.- flex-direction: column-reverse
.container4 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: column-reverse;
}
1
2
3
2.- Ejercicios básicos de Flexbox: justify-content
2.1.- justify-content: flex-start
.container5 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row;
justify-content: flex-start;
}
1
2
3
2.2.- justify-content: flex-end
.container6 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row;
justify-content: flex-end;
}
1
2
3
2.3.- justify-content: center
.container7 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row;
justify-content: center;
}
1
2
3
2.4.- justify-content: space-between
.container8 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row;
justify-content: space-between;
}
1
2
3
2.5.- justify-content: space-around
.container9 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row;
justify-content: space-around;
}
1
2
3
2.6.- justify-content: space-evenly
.container10 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row;
justify-content: space-evenly;
}
1
2
3
3.- Ejercicios básicos de Flexbox: gap
3.1.- flex-direction: row/column-gap: tamaño
.container11 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row;
column-gap: 10px;
}
1
2
3
3.2.- flex-direction: row-reverse/column-gap: tamaño
.container12 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: row-reverse;
column-gap: 10px;
}
1
2
3
3.3.- flex-direction: column/row-gap: tamaño
.container13 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: column;
row-gap: 10px;
}
1
2
3
3.4.- flex-direction: column-reverse/row-gap: tamaño
.container14 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-direction: column-reverse;
row-gap: 10px;
}
1
2
3
4.- Ejercicios básicos de Flexbox: flex-wrap
4.1.- flex-wrap: nowrap
.container15 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-wrap:nowrap;
/*fuerza que no se rompa la línea*/
}
1
2
3
4.2.- flex-wrap: wrap
.container16 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-wrap:wrap;
/*rompe la línea si lo necesita*/
}
1
2
3
4.3.- flex-wrap: wrap-reverse
.container17 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
flex-wrap:wrap-reverse;
}
1
2
3
5. Ejercicios básicos de Flex: align-items
5.1.- justify-content: flex-start / align-items: flex-start;
.container18 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-start;
align-items: flex-start;
}
1
2
3
5.2.- justify-content: flex-start / align-items: flex-end;
.container19 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-start;
align-items: flex-end;
}
1
2
3
5.3.- justify-content: flex-start / align-items: center;
.container20 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-start;
align-items: center;
}
1
2
3
5.4.- justify-content: flex-start / align-items: stretch;
.container21 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-start;
align-items: stretch;
/*Hay que quitar la altura a los
items, por eso he hecho el item 5*/
}
1
2
3
5.5.- justify-content: flex-start / align-items: baseline;
.container22 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-start;
align-items: baseline;
}
1
2
3
5.6.- justify-content: flex-end / align-items: flex-start;
.container23 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-end;
align-items: flex-start;
}
1
2
3
5.7.- justify-content: flex-end / align-items: flex-end;
.container24 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-end;
align-items: flex-end;
}
1
2
3
5.8.- justify-content: flex-end / align-items: center;
.container25 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-end;
align-items: center;
}
1
2
3
5.9.- justify-content: flex-end / align-items: stretch;
.container26 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-end;
align-items: stretch;
}
1
2
3
5.10.- justify-content: flex-end / align-items: baseline;
.container27 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: flex-end;
align-items: baseline;
}
1
2
3
5.11.- justify-content: center / align-items: flex-start;
.container28 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: center;
align-items: flex-start;
}
1
2
3
5.12.- justify-content: center / align-items: flex-end;
.container29 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: center;
align-items: flex-end;
}
1
2
3
5.13.- justify-content: center / align-items: center;
.container30 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: center;
align-items: center;
}
1
2
3
5.14.- justify-content: center / align-items: center con gap;
.container31 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: center;
align-items: center;
column-gap: 25px;
}
1
2
3
5.15.- justify-content: center / align-items: stretch;
.container32 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: center;
align-items: stretch;
column-gap: 25px;
}
1
2
3
5.16.- justify-content: space-between / align-items: flex-start;
.container33 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: space-between;
align-items: flex-start;
column-gap: 25px;
}
1
2
3
5.17.- justify-content: space-between / align-items: flex-end;
.container34 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: space-between;
align-items: flex-end;
column-gap: 25px;
}
1
2
3
5.18.- justify-content: space-between / align-items: center;
.container35 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: space-between;
align-items: center;
column-gap: 25px;
}
1
2
3
5.19.- justify-content: space-between / align-items: stretch;
.container36 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: space-between;
align-items: stretch;
column-gap: 25px;
}
1
2
3
5.20.- justify-content: space-between / align-items: baseline;
.container37 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: space-between;
align-items: baseline;
column-gap: 25px;
}
1
2
3
5.21.- justify-content: space-around / align-items: flex-start;
.container38 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: space-around;
align-items: flex-start;
column-gap: 25px;
}
1
2
3
5.22.- justify-content: space-around / align-items: flex-end;
.container39 {
display:flex;
background-color: aquamarine;
border: 2px solid #000;
margin: 50px;
height:150px;
justify-content: space-around;
align-items: flex-end;
column-gap: 25px;
}
1
2
3