styles.css

/* ------------------- Opdracht 1:  -------------------  */
.opdracht-1 .flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/*  ------------------- Opdracht 2:  ------------------- */
.opdracht-2 .flex-container {
    display: flex;
    flex-direction: row;
}

.opdracht-2 .flex-item {
    flex-basis: 240px;
}

/*  ------------------- Opdracht 3:  ------------------- */
.opdracht-3 .flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.opdracht-3 .top-left {
    align-self: flex-start;
}

.opdracht-3 .centered {
    align-self: center;
}

.opdracht-3 .bottom-right {
    align-self: flex-end;
}

/*  ------------------- Opdracht 4:  ------------------- */
.opdracht-4 .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

/*  ------------------- Opdracht 5:  ------------------- */
.opdracht-5 .flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.opdracht-5 .flex-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/*Met de selector nth-of-type(getal) kun je het "zoveelste" element van dat type aanspreken*/
.opdracht-5 .flex-column:nth-of-type(1) {
    align-items: flex-start;
}

.opdracht-5 .flex-column:nth-of-type(2) {
    align-items: center;
}

.opdracht-5 .flex-column:nth-of-type(3) {
    align-items: flex-end;
}