1.- Display Flex

1
2
3

.d-flex{
    display: flex;
}

2.- Flex Direction

1
2
3

.d-flex-2{
    display: flex;
    flex-direction: column;
}

3.- Justify Content (Dirección Row)

1
2
3

.d-flex-3{
    display: flex;
    justify-content: space-around;
}

4.- Justify Content (Dirección Column)

1
2
3

.d-flex-4{
    height: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

5.- Align Items (Dirección Row)

1
2
3

.d-flex-5{
    height: 700px;
    display: flex;
    align-items: center;
}

6.- Align Items (Dirección Columna)

1
2
3

.d-flex-6{
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: end;
}

7.- Align Items y JustifyContent

1
2
3

.d-flex-7{
    height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

8.- Flex Basis

1
2
Contenido

.d-flex-8{
    display: flex;
}
.d-flex-8 .box{
    flex-basis: 200px;
}

9.- Gap y Calc

1
2
3

.d-flex-9{
    display: flex;
    justify-content: space-between;
}
.d-flex-9 .box:nth-child(1){
    flex-basis: calc(50% - 20px);
}
.d-flex-9 .box:nth-child(2),
.d-flex-9 .box:nth-child(3){
    flex-basis: calc(25% - 20px);
}

10.- Flex Wrap

1 Contenido
2 Contenido
3 Contenido
4 Contenido
5 Contenido
6 Contenido

.d-flex-10{
    display: flex;
    flex-wrap: wrap;
}
.d-flex-10 .box{
    flex-basis: 33.3%;
}

11.- Flex Grow

.d-flex-11{
    display: flex;
}
.d-flex-11 .box:nth-child(1){
    flex-grow: 2;
}
.d-flex-11 .box:nth-child(2),
.d-flex-11 .box:nth-child(3){
    flex-grow: 1;
}

12.- Flex Shrink

.d-flex-12{
    display: flex;
}
.d-flex-12 .box{
    flex-grow: 1;
    flex-basis: 300px;
}
.d-flex-12 .box:nth-child(1),
.d-flex-12 .box:nth-child(3){
    flex-shrink: 2;
}

13.- Flex Shorthand

1
2
3

.d-flex-13{
    ;display: flex;
    ;gap: 2rem;
}
.d-flex-13 .box{
    /** Grow Shrink Basic**/
    flex: 1 0 33.3%;
}